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

小编典典

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

reactjs

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

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

在JSXif的if /
else指南中，该速记被称为立即调用的函数表达式。但是，自从我最新的React更新以来，它开始呈现0而不是null。

这是一个jsfiddle

为什么会这样呢？

阅读 225

2020-07-22

共1个答案

小编典典

所述&&操作者首先评估左手表达，并且如果左手表达式求东西falsy它 返回左手表达式的值 而无需进一步评估。

因此(0 && "Bar")求0值后将其呈现为字符串。如果所有伪造的值都在渲染中被丢弃，那么将无法0在React中打印a ，例如length is { 0 }，仅print length is。

但是false，null和undefined作为子项使用时，会被React渲染器丢弃，而正是这种情况：

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

2020-07-22