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

Question

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

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

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

Answer 1

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

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

如果 list.length 是 falsy，那么 output 将采用它的值（因此 0 在这种情况下），而不是 false想想。

Answer 2

基本上就是这样，short-circuit evaluation是这样设计的：

As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:

(some falsy expression) && expr is short-circuit evaluated to the falsy expression

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

虽然它也被评估为虚假 it is not ignored on render 而不是 false、null、undefined 或 true.

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

{ 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 3

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

@sp00m 的其他回答清楚地解释说它与 React 无关，但它是 [=36= 的一个特性].

它有什么作用？

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

解决方案：

你可以把它变成真实的期望，比如 [].length > 0 或 [].length !== 0 或 !![].length 或者做一个三元运算符来显示组件 dom.
最后一个将 falsy/truthy 值转换为布尔值。

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

Why "0" is rendered on short-circuit evaluation of `array.length && ...`

javascript

render

conditional-statements

reactjs