WHAT - React 两个重要的 Typescript 类型：ReactNode vs JSX.Element

文章目录

[ReactNode 是什么？](#ReactNode 是什么？)
- 示例用途
[JSX.Element 是什么？](#JSX.Element 是什么？)
- 示例用途
[ReactNode vs JSX.Element 对比](#ReactNode vs JSX.Element 对比)
使用建议
其他相关类型
例子总结

这两个类型 ReactNode 和 JSX.Element 在 React + TypeScript 中经常出现，但它们含义不同，适用场景也不同。

下面详细对比一下，并给出使用建议。

ReactNode 是什么？

它来自 @types/react，类型定义如下：

typescript 复制代码

type React.ReactNode = string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined

ReactNode 代表所有可以渲染的内容，包括 JSX.Element、Fragment、字符串、数字、数组、null 等。

示例用途

typescript 复制代码

interface Props {
  children: React.ReactNode;
}

const MyBox = ({ children }: Props) => <div>{children}</div>;

可以传入：

typescript 复制代码

<MyBox>文本或<div>元素</div>都可以</MyBox>

JSX.Element 是什么？

这是 JSX 编译后 React 元素的类型，也就是 React.createElement(...) 的返回值的类型，表示一个具体的单个元素 。或者是 React.cloneElement(...) 接收的值。

示例用途

tsx 复制代码

const MyComponent = (): JSX.Element => {
  return <div>Hello</div>;
};

不允许返回字符串、数字、null 等，必须是单个且有效 React 元素。

ReactNode vs JSX.Element 对比

类型名	来源	含义 / 能接受的内容	常见用途
`ReactNode`	`React`	表示一切可以渲染在页面上的内容	children、插槽、嵌套组件
`JSX.Element`	`JSX`（全名：`JSX.Element`）	React.createElement 的返回值（具体的 JSX 元素）	通常是组件返回值

使用建议

场景	建议类型	理由
组件 `children`	`React.ReactNode`	更灵活，支持各种类型内容
单个 JSX 返回值	`JSX.Element`	明确指返回的是一个 React 元素
动态渲染插槽内容 / 插件	`React.ReactNode`	支持函数、组件、文字等
内部私用组件返回值类型	`JSX.Element`	限制更强，有助于类型检查

其他相关类型

类型	含义
`ReactElement`	是 JSX.Element 的父类型
`ReactPortal`	Portal 节点的类型
`ReactNode[]`	ReactNode 的数组

例子总结

tsx 复制代码

// ✅ ReactNode：适用于 children
type MyProps = {
  children: React.ReactNode;
  header?: React.ReactNode;
};

// ✅ JSX.Element：适用于组件返回值
const MyComponent = (): JSX.Element => {
  return <div>Hello</div>;
};