请教一下 react 的 tsx 怎么写类型定义？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1455 天前的主题，其中的信息可能已经有所发展或是发生改变。

React.FC,React.Element,React.Node 的本质区别是什么呢？
我一般用 React.Element，但是看其他人(团队其他所有人)都是用的 FC 和 Node

8 条回复 • 2020-11-30 10:16:46 +08:00

joesonw

2020-11-29 16:16:05 +08:00

React.ReactNode 含 React.ReactElement

yuang

2020-11-29 16:47:58 +08:00

JSX.Element

yuang

2020-11-29 16:49:47 +08:00

可以在这个仓库里面看区别 https://github.com/piotrwitek/react-redux-typescript-guide#reactreactelement--jsxelement

tikazyq

2020-11-29 17:38:00 +08:00

React.FC = Functional Component 函数组件
React.ReactElement = Native DOM Element / User Defined Component 原生 DOM 元素 / 用户自定义元素
React.ReactNode = Any possible type of React node 所有可能的 React 节点 = 原生 JS 类型 + 原生 DOM 元素 + 用户自定义元素

简单来说，不知道用什么组件类型时，就用 React.FC

chenliangngng

2020-11-29 22:49:17 +08:00 via Android

@yuang 3#
@tikazyq 4#
那使用 React.element 没有任何问题对吧？
请问又为什么要用 fc 呢？仅仅是为了区别 React.Component 吗

geekrainy

2020-11-30 00:12:54 +08:00

React.FC 包含了 PropsWithChildren 的泛型，不用显式的声明 props.children 的类型，ReactNode 和 ReactElement 一般用在通过其他 props 传递组件的情形，手动声明。

weixiangzhe

2020-11-30 09:13:39 +08:00

看这个 https://github.com/typescript-cheatsheets/react-typescript-cheatsheet

funnyecho

2020-11-30 10:16:46 +08:00

可以参考 @types 中的定义： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/4a1e6b12938de49594f8eba59ad1b1f19d6478c4/types/react/index.d.ts#L237

React.Element 可以看作是 React 组件的基类型。

我自己实际使用中，很少会用 React.Element 。

如果定义 functional component，就用 React.FC<T>。

React.Node 用于外部组件的输入（比如 props ），因为 React.Node 个人感觉类似与 any 的组件类型，它几乎包含了 React 所支持的所有组件类型：
type ReactNode = ReactElement | ReactNodeArray | string | text | boolean | null | undefined;