React按文件类型动态渲染图标报Functions are not valid as a React child错误如何解决

错误原因 #

你在标签的JSX结构中直接定义了匿名判断函数但没有执行，React会将函数本身作为子元素尝试渲染，而React不支持直接渲染函数类型的子节点，因此触发了Functions are not valid as a React child警告。

修复方案 #

任选以下一种实现即可：

方案1：立即执行匿名函数 #

在你定义的匿名函数末尾添加()，让函数立即执行返回对应的图标组件：

<td>
  {(() => {
    if (file.document.ext === ".pdf") {
      return <img src={PDF} alt="pdf文件" />;
    } else if (file.document.ext === ".xml") {
      return <XML />;
    } else {
      return <JPEG />;
    }
  })()}
</td>

方案2：用三元运算符简化逻辑（更推荐） #

不需要包裹函数，直接通过多层三元判断返回对应组件，代码更简洁易读：

<td>
  {file.document.ext === ".pdf" ? <img src={PDF} alt="pdf文件" />
  : file.document.ext === ".xml" ? <XML />
  : <JPEG />}
</td>

优化提示：可以使用可选链file.document?.ext替代file.document.ext，避免接口返回数据中缺少document字段时引发的空值报错。

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