為什么在`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。
最后一個將虛假/真實值轉換為布爾值。