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 &amp;&amp; &lt;Bar /&gt;进行表达式真值测试。基本上将长度强制转换为布尔值,以便可以在表达式中使用。 为什么不只是length ? &lt;Bar /&gt; : void(0) @AvraamMavridis IMO 对于跨越多行的复杂组件看起来有点丑 【参考方案1】:

&amp;&amp; 运算符首先计算左侧表达式,如果左侧表达式的计算结果为假,它返回左侧表达式的值而不进一步计算。 p>

所以(0 &amp;&amp; "Bar") 计算为0,然后将其呈现为字符串。如果在渲染中丢弃了所有虚假值,那么将无法在 React 中打印0,例如length is 0 只会打印length is

但是 falsenullundefined 如果用作子级,则被 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

您需要 &amp;&amp; 运算符的左侧表达式来返回这三个中的一个,最简单的是布尔值:

( !!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 ? &lt;Bar /&gt; : void(0)

React 不会渲染 undefined 的内容,而使用 void(0) 可以保证没有任何库更改了 undefined 的值

【讨论】:

问题是,这已经奏效了。更新后反应没有。我仍在尝试找出导致这种行为的变化..

以上是关于JSX 不会将表达式中的整数计算为布尔值的主要内容,如果未能解决你的问题,请参考以下文章

为什么布尔表达式的值不会改变? (JAVA)

四月二十二日报

在 JSX 中使用属性的布尔值

不兼容的类型:条件表达式 void 中的错误类型无法转换为布尔值。请协助

求解布尔表达式时如何思考?

LassoLarsCV算法参数