何时使用JSX.Element与ReactNode与ReactElement？

Question

我目前正在将React应用程序迁移到Typescript。到目前为止，它工作得很好，但是我的render函数的返回类型（分别是函数组件）有一个问题。

到目前为止，我一直使用jsx.element作为返回类型，现在如果组件决定不呈现任何内容，也就是返回null，这就不再起作用了，因为null不是jsx.element的有效值。这是我旅程的开始，因为现在我搜索了web并发现应该使用reactnode，其中还包括null以及其他一些可能发生的事情。这似乎是更好的赌注。

1. jsx.element、reactnode和reactelement有什么区别？
2. 为什么类组件的render方法返回reactnode，而函数组件返回reactelement？
3. 如何解决null？

Answer 1

Element、ReactNode和ReactElement之间有什么区别？

ReactElement是具有类型和道具的对象。

 type Key = string | number

 interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

ReactNode是ReactElement、ReactFragment、string、number或ReactNodes的数组，或者null、undefined或者boolean：

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any, any> { }
  }
}

举例说明：

 <p> // <- ReactElement = JSX.Element
   <Custom> // <- ReactElement = JSX.Element
     {true && "test"} // <- ReactNode
  </Custom>
 </p>

为什么类组件的呈现方法返回ReactNode，而函数组件返回ReactElement？

事实上，他们确实返回了不同的东西。组件返回：

 render(): ReactNode;

 interface StatelessComponent<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement | null;
    // ... doesn't matter
}

_类型源