NaN是否为合法React子元素？条件渲染表现与文档存疑

当你在React里写这样的代码时：

<p>{NaN && <div>Hello</div>}</p>

页面上会直接渲染出NaN文本，这确实和官方文档里列出的React节点类型看起来有冲突——毕竟文档里没提到NaN。

先看官方文档里关于React节点的定义（已翻译为中文）：

React节点可以是：

• 通过<div />或createElement('div')创建的React元素
• 使用createPortal创建的Portal
• 字符串
• 数字
• true、false、null或undefined（不会被显示）
• 由其他React节点组成的数组

这里的关键是：NaN在JavaScript里属于Number类型（你可以通过typeof NaN === 'number'验证），所以它被React归到了「数字」这个节点大类里。文档只列举了节点的大类，没有特意提到数字类型里的特殊值NaN。

React对数字节点的处理逻辑是直接将其转换为字符串后渲染，所以NaN就会被渲染成"NaN"文本，而像true/false/null/undefined这类明确被文档标注为「不会显示」的值，才会被React忽略。

如果要避免这种情况，你需要显式处理NaN：

• 用isNaN判断后再渲染：

  <p>{!isNaN(someValue) && <div>Hello</div>}</p>
  

• 或者把NaN转换为React会忽略的值：

  <p>{isNaN(someValue) ? null : <div>Hello</div>}</p>
  

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