组件的render方法是否应具有返回类型React.ReactNode或JSX.Element？

Question

两者似乎都不会导致编译错误，但是有什么区别，一个比另一个更可取吗？

Answer 1

这取决于。ReactJS 原则上可以 渲染：

type RenderType = JSX.Element* | Array<RenderType> | string | number | boolean | null
// * includes Portal, Fragment
// for both function and class components
// (type doesn't exist in React type declarations)

TS 渲染类型目前仅限于：

• 类组件：（ReactNode比 React 允许的更宽）

• 函数组件：（JSX.Element | null比 React 更严格）

JSX.Element或多或少与 相同ReactElement，您可以互换使用两者。

Answer 2

这个确切的问题在react-typescript-cheatsheet repo问题＃57中提出

要引用原来的答案：

无论组件最终呈现什么内容，React.createElement都始终返回对象，该对象是JSX.Element接口，但是React.ReactNode组件所有可能的返回值的集合。

• JSX.Element ->返回值 React.createElement
• React.ReactNode ->组件的返回值

通常，我认为这种想法是JSX.Element专门描述的接口，React.createElement范围狭窄，而范围React.ReactNode更广，涵盖了组件可以返回的所有可能值。