JSX 不会将表达式中的整数评估为布尔值

Question

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

var Foo = React.createClass({
  render: function() {
    var length = 0;
    return <div>Foo {length && <Bar />}</div>;
  }
});

shorthand if 在 if/else in JSX guide 中提到为立即调用的函数表达式。然而，自从我最近更新了 React，它开始呈现 0 而不是 null。

Here is a jsfiddle

为什么会这样？

Answer 1

我会这样写

length ? <Bar /> : void(0)

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

的值

Answer 2

&& 运算符首先计算左侧表达式，如果左侧表达式的计算结果为假值，则 return 计算左侧的值表达式 没有进一步评估。

所以 (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

您需要 && 运算符的左侧表达式到 return 这三个中的一个，最简单的是布尔值：

( !!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

JSX 不会将表达式中的整数评估为布尔值

JSX doesn't evaluate integer in expression as boolean

conditional-operator

jsx

reactjs

react-jsx