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

发布时间：2020-12-15 09:36:04 所属栏目：百科来源：网络整理

导读：为了更好地解释我的问题,我将使用一个例子：假设我有两个反应元素,它们彼此包含在一起.让我们调用容器Box和子Stuff. Box只是渲染一个带有className =“box”的div,它围绕着它给出的孩子.大多数时候东西渲染的东西,但它的渲染函数在决定没有渲染的东西时可以

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

假设我有两个反应元素,它们彼此包含在一起.让我们调用容器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修复它.

看起来这也是一个相对较新的修复：
https://github.com/gajus/react-css-modules/commit/a9c8de252d5464037090e155c431abfe9f671531

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!