this.state.display && <h1>已显示！</h1>有效，反之亦然吗？

Question

假设this.state.display为true时，我只想显示h1元素。

{this.state.display && <h1>Displayed!</h1> }

可以，但是

{<h1>Displayed!</h1> && this.state.display}

没有。我正在这里测试： https://learn.freecodecamp.org/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering

有人知道原因吗？ 谢谢

Answer 1

&&的意思是“如果左侧是真实的，则返回右侧。否则（如果左侧是虚假的，则返回左侧）。”由于<h1>Displayed!</h1>是真实的，因此它无条件求值为this.state.display，这不是您要呈现的内容。