jdn*_*jdn 7 javascript render conditional-statements reactjs
目前,我看到这样的行为:
render() {
const list = [];
return (
<div>
{ list.length && <div>List rendered</div> }
</div>
)
}
Run Code Online (Sandbox Code Playgroud)
我的预期是在该条件下没有呈现任何内容,但是呈现了字符串“0”(字符串“0”是list.length
)。我不知道为什么。有人可以帮我向 React 解释这个案例吗?
基本上就是这样,短路评估是设计的:
当逻辑表达式从左到右求值时,使用以下规则测试它们可能的“短路”求值:
(一些虚假的表达式)&& expr 是对虚假表达式的短路评估
因此,0 与行一起返回{ list.length && <div>List rendered</div> }
。
虽然它也被评估为假,但在渲染时不会被忽略,而不是false
, null
,undefined
或true
。
因此,如果您希望短路表达式返回被忽略的值之一,您可以这样做:
{ list.length>0 && <div>List rendered</div> }
Run Code Online (Sandbox Code Playgroud)
或强制转换0
为false
,像这样:
{ !!list.length && <div>List rendered</div> }
Run Code Online (Sandbox Code Playgroud)
以下是作为概念证明的快速演示:
{ list.length>0 && <div>List rendered</div> }
Run Code Online (Sandbox Code Playgroud)
{ !!list.length && <div>List rendered</div> }
Run Code Online (Sandbox Code Playgroud)
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'))
Run Code Online (Sandbox Code Playgroud)
这实际上与 React 无关,而是与 JavaScript 直接相关:
const output = list.length && "foobar";
Run Code Online (Sandbox Code Playgroud)
如果list.length
是falsy,output
则将取其值(0
在本例中如此),而不是false
像人们想象的那样。
归档时间: |
|
查看次数: |
1388 次 |
最近记录: |