用于隐藏/显示React渲染功能中组件的逻辑和模式

Question

阅读了很多React代码后，我注意到这种模式可以在React渲染方法中切换组件的渲染。

{ CONDITION && <Component /> }

这对我来说意义不大。这不是逻辑上的，而是完全是另一个运算符；在这种情况下，为什么&&呢？否则这是合乎逻辑的，并且，如果第一个子句为true，则惰性求值仅求值（提供）第二个子句。如果是这种情况，那就像我们不应该使用的丑陋骇客一样。

我可能迷路了。该语法是什么意思，其背后的原因是什么？

Answer 1

A && B计算为：

• [B，如果A为真，或
• [A否则。

如果您尝试在React中呈现false或null或undefined值，则将不会呈现任何内容。

因此，如果{ CONDITION && <Component /> }虚假，CONDITION将不呈现任何内容，否则，将<Component />呈现。