2021-12-8

[React] childrenの型はReactNodeを使う

https://maku.blog/p/xenv4bh/

ここに全部書いている。

今まで手癖でchildrenの型には JSX.Element を使用してしまっていたが、これを使うと以下のような不都合がある。

<SomeComponent><span>テキスト</span></SomeComponent>

コンポーネントの中に文字列を直接配置することが出来ず。span等タグで囲む必要が出てきてしまう。

ComponentPropsで生成したbuttonのPropsにはchildrenが元からあり、「この型どうなってるんだ？」と見た所ReactNodeを使っていることがわかった。

type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

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

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

各型定義は上のようになっていて、 JSX.Element ≒ ReactElement であることがわかる。

ReactNodeはReactElement以外にも諸々許容しており、その中に string があるので文字列を直接設定することが出来るという感じ、みたい。