React中JSX里&&运算符为何能替代三元运算符渲染元素？

这其实是利用了JavaScript的**逻辑与运算符（&&）**特性，结合React对JSX渲染的规则实现的，拆解来看：

1. JavaScript逻辑与的行为
   在JS里，&&运算符会按顺序计算表达式：

   • 如果左侧表达式的结果是假值（false、null、undefined、0、''、NaN），直接返回左侧的值，不会执行右侧表达式
   • 如果左侧表达式的结果是真值，则返回右侧表达式的结果

2. React对JSX假值的处理规则
   React在渲染JSX时，会自动忽略这些假值：null、undefined、false、0、''，不会把它们渲染到DOM中。

3. 回到你的代码分析

   • 当props.openSpots === 0时，左侧表达式结果是true（布尔真值），所以&&返回右侧的<div className="card--badge">SOLD OUT</div>，React就会渲染这个div
   • 当props.openSpots !== 0时，左侧表达式结果是false（布尔假值），&&返回false，React会忽略这个值，不渲染任何内容——这和你熟悉的三元写法props.openSpots === 0 ? <div>...</div> : null效果完全一致

注意一个小细节 #

如果直接写{props.openSpots && <div>...</div>}（没有严格相等判断），当props.openSpots是0时，左侧表达式返回0（假值），&&会返回0，这时候React会把0渲染到DOM里，出现意外的数字。所以你的代码里用props.openSpots === 0来得到布尔值，是正确的写法，避免了这个问题。

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