为什么在`array.length && ...`的短路评估中呈现“0”

Question

目前，我看到这样的行为：

render() {
   const list = [];
   return (
      <div>
         { list.length && <div>List rendered</div> }
      </div>
   )
}

我的预期是在该条件下没有呈现任何内容，但是呈现了字符串“0”（字符串“0”是list.length ）。 我不知道为什么。 有人可以帮我向 React 解释这个案例吗？

Answer 1

基本上就是这样， 短路评估是设计的：

当逻辑表达式从左到右求值时，使用以下规则测试它们可能的“短路”求值：

（一些虚假的表达式）&& expr 是对虚假表达式的短路评估

因此， 0 与行{ list.length && <div>List rendered</div> } 。

虽然它也被评估为假， 但在渲染时不会被忽略，而不是false 、 null 、 undefined或true 。

因此，如果您希望短路表达式返回被忽略的值之一，您可以这样做：

{ list.length>0 && <div>List rendered</div> }

或者将0为false ，如下所示：

{ !!list.length && <div>List rendered</div> }

以下是作为概念证明的快速演示：

 const { render } = ReactDOM const Component = () => { const list = [] return ( <div> <div>Rendered on <code>{`list.length && <div>List rendered</div>`}</code>:{ list.length && <div>List rendered</div> }</div> <div>Rendered on <code>{`list.length>0 && <div>List rendered</div>`}</code>:{ list.length>0 && <div>List rendered</div> }</div> <div>Rendered on <code>{`!!list.length && <div>List rendered</div>`}</code>:{ !!list.length && <div>List rendered</div> }</div> </div> ) } render (<Component />, document.getElementById('root'))

 code {background-color: grey; color:white;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

这实际上与 React 无关，而是与 JavaScript 直接相关：

const output = list.length && "foobar";

如果list.length为falsy ，则output将取其值（在本例中为0 ），而不是人们可能认为的false 。

Answer 3

我回答得有点晚，但我想表达我的理解。

正如@sp00m 的其他答案清楚地解释了它与React无关，但它是 javascript 的一个特性。

它能做什么？

当左侧为假时，它将采用它的值，因为在您的情况下它将为0因为[].length 。 这会导致在 DOM 中打印"0" 。

解决方案：

您可以将其用于[].length > 0或[].length !== 0或!![].length类的真实期望，或者使用三元运算符来显示组件 dom。
最后一个将虚假/真实值转换为布尔值。