目前，我看到这样的行为：
render() {
const list = [];
return (
<div>
{ list.length && <div>List rendered</div> }
</div>
)
}
我的预期是在该条件下没有呈现任何内容，但是呈现了字符串“0”（字符串“0”是list.length）。我不知道为什么。有人可以帮我向 React 解释这个案例吗？
为什么在`array.length && ...`的短路评估中呈现“0”
IT技术
javascript
reactjs
conditional-statements
render
2021-05-25 17:01:01
3个回答
基本上就是这样，短路评估是这样设计的：
由于逻辑表达式是从左到右计算的，因此使用以下规则测试它们可能的“短路”计算：
（一些虚假的表达式）&& 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> }
以下是作为概念证明的快速演示：
这实际上与 React 无关，而是与 JavaScript 直接相关：
const output = list.length && "foobar";
如果list.length是falsy，output则将取其值（0在本例中如此），而不是false像人们想象的那样。
我回答得有点晚，但我想表达我的理解。
正如@sp00m 的其他答案清楚地解释了它与React无关，但它是 javascript 的一个特性。
它能做什么？
当左侧为 falsy 时，它将采用它的值，因为在您的情况下它将是0因为[].length. 这会导致"0"在 DOM 中打印。
解决方案：
您可以将其用于真实的期望，例如[].length > 0or[].length !== 0或!![].length或制作三元运算符来显示组件 dom。
最后一个将虚假/真实值转换为布尔值。