React函数组件条件渲染的TypeScript兼容实现方案

报错原因 #

React 本身支持渲染 false/true/null/undefined 为无实际内容，但18版本以前的 @types/react 类型定义没有将 false 纳入合法的 JSX 元素返回类型，因此直接返回布尔值 && <组件/>的写法会触发类型报错。

可选实现方案 #

• 方案1：三目运算符返回null（最常用）
  直接将原有写法替换为三目表达式，显式返回 null 作为不渲染时的结果，完全符合类型要求：

// child.ts
...
return someBoolean ? <Component/> : null
...

这种写法简洁直观，也避免了短路与运算符可能带来的优先级陷阱。

• 方案2：if判断提前返回
  适合后续需要扩展判断逻辑的场景，代码可读性更高：

// child.ts
...
if (!someBoolean) {
  return null
}
return <Component/>
...

• 方案3：升级类型定义兼容原有写法
  如果不想修改现有代码，可以将 @types/react 升级到18及以上版本，该版本之后的类型定义已经支持将boolean作为合法的JSX返回类型，原有短路与写法不需要修改就可以正常通过类型校验，注意要和项目实际使用的React版本匹配避免其他类型冲突。

疑问解答 #

你不需要必须使用三目或者if/else写法，升级类型定义即可兼容原有写法。不过更推荐使用显式返回null的实现，兼容性更强，也不会出现隐式类型带来的不可预期问题。

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