我习惯于编写这样的渲染可选组件：
var Foo = React.createClass({
render: function() {
var length = 0;
return <div>Foo {length && <Bar />}</div>;
}
});
这个速记if在if/else in JSX 指南中被称为立即调用的函数表达式。但是，自从我最近更新 React 以来，它开始呈现0而不是null.
为什么会这样？
JSX 不会将表达式中的整数评估为布尔值
IT技术
reactjs
react-jsx
conditional-operator
jsx
2021-05-04 23:34:05
2个回答
所述&&操作者首先评估左手表达，并且如果左手表达式求东西falsy它返回左手表达式的值而无需进一步评估。
So(0 && "Bar")评估0然后将其呈现为字符串。如果在渲染中丢弃所有虚假值，那么0在 React中将无法打印 a ，例如length is { 0 }只会打印length is。
然而false，null和undefined由如果作为一个孩子阵营渲染丢弃，这正是这个用例：
length is { 0 } // length is 0
length is { NaN} // length is NaN
length is { null } // length is
length is { false } // length is
length is { undefined } // length is
您需要&&运算符的左侧表达式来返回这三个中的一个，最简单的是布尔值：
( !!length && "Bar" ) // evaluates to false, doesn't print
( (length > 0) && "Bar" ) // evaluates to false, doesn't print
( (length != 0) && "Bar" ) // evaluates to false, doesn't print
( Boolean(length) && "Bar" ) // evaluates to false, doesn't print
我会这样写
length ? <Bar /> : void(0)
React 不会渲染某些东西undefined，并且void(0)你保证没有任何库改变了 的值undefined