Closed1

ReactElement・ReactNode・JSX.Elementの違い

SaeSae

ReactElement

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

ReactNode

ReactElement、ReactFragment、文字列、数値、ReactNodeの配列、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;

参考記事

https://dev.to/fromaline/jsxelement-vs-reactelement-vs-reactnode-2mh2

このスクラップは2023/03/18にクローズされました