JSX 不会将表达式中的整数计算为布尔值
Posted
技术标签:
【中文标题】JSX 不会将表达式中的整数计算为布尔值【英文标题】:JSX doesn't evaluate integer in expression as boolean 【发布时间】:2016-09-30 17:12:47 【问题描述】:我习惯这样写渲染可选组件:
var Foo = React.createClass(
render: function()
var length = 0;
return <div>Foo length && <Bar /></div>;
);
if
这个简写在if/else in JSX guide 中被提及为立即调用的函数表达式。然而,自从我最新的 React 更新后,它开始渲染 0
而不是 null
。
Here is a jsfiddle
为什么会这样?
【问题讨论】:
在您的示例中,test
是否意味着 length
?
尝试!!length && <Bar />
进行表达式真值测试。基本上将长度强制转换为布尔值,以便可以在表达式中使用。
为什么不只是length ? <Bar /> : void(0)
@AvraamMavridis IMO 对于跨越多行的复杂组件看起来有点丑
【参考方案1】:
&&
运算符首先计算左侧表达式,如果左侧表达式的计算结果为假,它返回左侧表达式的值而不进一步计算。 p>
所以(0 && "Bar")
计算为0
,然后将其呈现为字符串。如果在渲染中丢弃了所有虚假值,那么将无法在 React 中打印0
,例如length is 0
只会打印length is
。
但是 false
、null
和 undefined
如果用作子级,则被 React 渲染器丢弃,它是 exactly for this use case:
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
【讨论】:
【参考方案2】:我会这样写
length ? <Bar /> : void(0)
React 不会渲染 undefined
的内容,而使用 void(0)
可以保证没有任何库更改了 undefined
的值
【讨论】:
问题是,这已经奏效了。更新后反应没有。我仍在尝试找出导致这种行为的变化..以上是关于JSX 不会将表达式中的整数计算为布尔值的主要内容,如果未能解决你的问题,请参考以下文章