When to use JSX.Element vs ReactNode vs ReactElement?
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.
上一篇: Swift Tips(持续更新)
下一篇: 函数防抖和函数节流