JSX.Element vs ReactNode vs ReactElement
2 min read
404 | This page could not be found.
type Key = string | number
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 |JSX.Element is a ReactElement, with the generic type for props and type being any. so they are more or less the same.
declare global {
namespace JSX {
interface Element extends React.ReactElement<any, any> {}
}
}Components return:
render(): ReactNode;And functions are "stateless components":
interface StatelessComponent<P = {}> {
(props: P & { children?: ReactNode }, context?: any): ReactElement | null
// … doesn't matter
}