JSX 不会将表达式中的整数计算为布尔值

Question

我习惯这样写渲染可选组件：

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

为什么会这样？

Answer 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

Answer 2

我会这样写

length ? <Bar /> : void(0)

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