reactjs – 在react元素中渲染null会阻止我使用css的：empty选择器

2019年7月28日 143次阅读

为了更好地解释我的问题,我将使用一个例子：

假设我有两个反应元素,它们彼此包含在一起.让我们调用容器Box和子Stuff. Box只是渲染一个带有className =“box”的div,它围绕着它给出的孩子.大多数时候东西渲染的东西,但它的渲染函数在决定没有渲染的东西时可以返回null.

这是扭曲：if< Box>是空的,我根本不想表现出来.所以我决定使用css3选择器,并编写类似的东西

.box:empty {
    display: none;
}

…应该工作,除了反应呈现< noscript>标记,它阻止浏览器将父.box元素视为空…

这周围有优雅的方式吗？我想保持在Stuff内部确定空虚的逻辑,并让Box“查看”其内容并决定是否要显示任何内容.

UPDATE

这个小提琴https://jsfiddle.net/69z2wepo/67543/有一个我想要做的例子.奇怪的是,在那个小提琴中,它起作用,并且反应不会呈现< noscript>标签…为什么它在我的代码中呈现< noscript>？在什么情况下反应选择渲染< noscript> s？

最佳答案发现问题了！

我使用的是旧版本的react-css-modules(3.7.7).升级到4.1.0修复它.