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

Question

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

Answer 1

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

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渲染类型当前为limited to：

• Class component：ReactNode（比React允许的宽）

• Function component：JSX.Element | null（比React更严格）

JSX.Element与ReactElement大致相同，您可以将两者互换使用。

Answer 2

这个确切的问题是在react-typescript-cheatsheet repo issue #57

中提出的

致quote the original answer：

  

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

     

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

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