React中JSX条件判断时??空值合并运算符不生效怎么解决？

问题原因 #

• 空值合并运算符??的生效逻辑非常严格：仅当左侧操作数为null或者undefined时，才会返回右侧的值，其余所有假值（包括false、0、空字符串、NaN）都不会触发右侧返回逻辑。
• 你写的object.array.length > 0是布尔比较运算，返回值只能是true或false，不存在null/undefined的情况，因此??永远会返回左侧的布尔值，不会触发右侧<div>Yes</div>的返回。
• 另外JSX渲染时会自动忽略布尔值、null、undefined类型的内容，所以这段代码在页面上不会显示任何元素，看起来就像完全没有生效。
• 你之前使用的三元运算符是基于表达式的布尔真假判断返回对应值，和??的空值判断逻辑完全不同，两者不能直接等价替换。

解决方法 #

根据实际业务场景选择对应的运算符即可：

• 如果你要实现「判断条件为真时渲染指定内容，为假时不渲染内容」，可以直接使用逻辑与&&运算符，写法更简洁：

object.array.length > 0 && <div>Yes</div>

• 如果你确实需要空值判断能力（比如仅当某个值为null/undefined时才渲染占位内容），再使用??运算符，示例如下：

// 仅当user.phone为null/undefined时显示「未绑定手机号」
{user.phone ?? <div>未绑定手机号</div>}

• 如果需要真假两种情况都渲染不同的自定义内容，继续使用三元运算符即可，这是符合语法规范的标准实现，不属于多余写法。

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