Open2

【React】childrenの型定義

nerusannerusan

概要

Reactでは子要素の出力するchildrenを利用することがある

例えば以下のコードだ。

imprt React from 'react';

function Root() {
  return (
    <Auth>
      <div>hoge</div>
    </Auth>
  )
}
function Auth({children}: {children: React.ReactNode}) {
  return cildren;
}

親から受け取った子要素の型を指定する時React.ReactNodeを利用するようにと記事が多くあるが、実際に利用すると以下のエラーが出た。

'Auth' を JSX コンポーネントとして使用することはできません。
  その戻り値の型 'ReactNode' は、有効な JSX 要素ではありません。
    型 'undefined' を型 'Element | null' に割り当てることはできません。

この時の解決策として、React.ReactElementを利用すると解決できる。
ただ一つの単一コンポーネントしか指定できないので二つ以上指定したい場合は以下のようにする

function Root() {
  return (
    <Auth>
      <>
        <div>hoge</div>
        <div>foo</div>
      </>
    </Auth>
  )
}