When to use JSX.Element vs ReactNode vs ReactElement?

• 2020 年 1 月 14 日
• 筆記

A ReactElement is an object with a type and props.

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

A ReactNode is a ReactElement, a ReactFragment, a string, a number or an array of ReactNodes, or null, or undefined, or a 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 is a ReactElement, with the generic type for props and type being any. It exists, as various libraries can implement JSX in their own way, therefore JSX is a global namespace that then gets set by the library, React sets it like this:

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?

Indeed, they do return different things. Components return:

 render(): ReactNode;

And functions are “stateless components”:

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

As you can see, functional components can have ReactNodes as children, but they must return a ReactElement or null. If you think about it, it is actually the same as with Components: They are itself ReactElements, but they can have ReactNodes as children.

How do I solve this with respect to null?

Type it as ReactElement | null just as react does. Or let Typescript infer the type.