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

[chenliangngng]

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

[joesonw]

React.ReactNode 含 React.ReactElement

[yuang]

JSX.Element

[yuang]

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

[tikazyq]

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]

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

[geekrainy]

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

[weixiangzhe]

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

[funnyecho]

可以参考 @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;