(メモ) React における children

例えば、 MyComponent なるコンポーネントを自分で定義しているとき、その component を利用する際には、 JSX で子供のノードを与えたいとする。

const App = () => (
  <MyComponent>
    <Content1 />
    <Content2 />
  </MyComponent>
)

このとき、 MyComponent では props.children に、 JSX で <MyComponent> の内側に指定されていた JSX の結果である React Nodes の配列が渡されることになる。

const MyComponent = ({ children }) => (
  <div>
    <header>Header</header>
    {children}
  </div>
)

仕組み的に、 React 的には children とは、コンポーネントに JSX を引き渡したくって、かつ、その JSX が高々一つ(ないし、ネストされた構造を表した際に、それを表す子供側が JSX で表現できて、かつ、その要素が高々一つ)である場合に、 JSX の式としてコンポーネントに引き渡せるようにした機構、である。

ただただ JSX の結果を props.children として渡すだけの処理であるので、コストがそこまでかかるとは思えず、なので、あるコンポーネントがラッパー的であるなどして、 props で受け取りたい値の中に、 JSX が高々一つである場合には、 children として受け渡す設計でそのコンポーネントを設計するのが、自然であるかもしれない、という備忘録。