React组件中如何设置多个条件实现条件渲染？

问题根因 #

你的代码失效是JavaScript运算符优先级和短路运算规则共同导致的：

• &&的优先级高于||，你写的hasContent || hasDesc && <span>{value}</span>实际执行逻辑等价于hasContent || (hasDesc && <span>{value}</span>)
• ||遵循短路规则：如果第一个表达式hasContent为真值，会直接返回hasContent本身，不会执行后续逻辑。而React不会渲染布尔类型的true，所以当hasContent为真时元素不会显示。

正确实现 #

只需要把两个或判断用括号包裹，提升或运算的优先级即可：

{(hasContent || hasDesc) &&
   <span>{value}</span>
}

也可以用三元运算符实现相同效果：

{hasContent || hasDesc ? <span>{value}</span> : null}

以上两种写法都满足「只要hasContent或hasDesc任意一个为真就渲染对应span」的需求。

内容的提问来源于stack exchange，提问作者user16993687