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

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 解释这个案例吗?

Yev*_*kov 8

基本上就是这样,短路评估是设计的:

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

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

因此,0 与行一起返回{ list.length && <div>List rendered</div> }

虽然它也被评估为假,但在渲染时不会被忽略,而不是false, null,undefinedtrue

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

{ list.length>0 && <div>List rendered</div> }
Run Code Online (Sandbox Code Playgroud)

或强制转换0false,像这样:

{ !!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)


sp0*_*00m 5

这实际上与 React 无关,而是与 JavaScript 直接相关:

const output = list.length && "foobar";
Run Code Online (Sandbox Code Playgroud)

如果list.lengthfalsyoutput则将取其值(0在本例中如此),而不是false像人们想象的那样。