javascript - 什么时候使用 JSX.Element vs ReactNode vs ReactElement？

Question

我目前正在将 React 应用程序迁移到 TypeScript。到目前为止，这工作得很好，但我的 render 函数的返回类型有问题，特别是在我的功能组件中。

我一直使用 JSX.Element 作为返回类型，现在如果组件决定不渲染任何东西，这就不再起作用了，即返回 null，因为 null 不是 JSX.Element 的有效值。这是我旅程的开始。我在网上搜索了一下，发现您应该改用 ReactNode，其中包括 null 和其他一些可能发生的事情。

但是，在创建功能组件时，TypeScript 会提示 ReactNode 类型。同样，经过一些搜索我发现，对于功能组件，你应该使用 ReactElement 来代替。但是，如果我这样做，兼容性问题就消失了，但现在 TypeScript 再次提示 null 不是有效值。

长话短说，我有三个问题:

1. JSX.Element、ReactNode 和 ReactElement 有什么区别？
2. 为什么类组件的render方法返回ReactNode，而函数组件返回ReactElement？
3. 如何解决关于 null 的这个问题？

Answer 1

What is the difference between JSX.Element, ReactNode and 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 的 array，或 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;

JSX.Element 是一个 ReactElement，props 和 type 的通用类型是 any。它存在，因为各种库可以以自己的方式实现 JSX，因此 JSX 是一个全局命名空间，然后由库设置，React 是这样设置的:

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

举例:

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

Why do the render methods of class components return ReactNode, but function components return ReactElement?

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

 render(): ReactNode;

函数是“无状态组件”:

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

这实际上是由于 historical reasons .

How do I solve this with respect to null?

将其键入 ReactElement | null 就像 react 一样。或者让 Typescript 推断类型。

<子> source for the types