React Props Children

1. props.children とは

React では、コンポーネントの開始タグと終了タグの間に記述したコンテンツを、別のコンポーネントへと受け渡すことができます。

このコンテンツは、受け取り側のコンポーネント内で props.children プロパティを使用することでアクセスし、表示させることが可能です。

2. 実装例：親子間でのコンテンツ受け渡し

以下の例では、Parent（親）コンポーネントから、Son（息子）および Daughter（娘）コンポーネントの開始タグと終了タグの間に記述されたテキストコンテンツを送信しています。

import { createRoot } from 'react-dom/client'

// Son コンポーネント：受け取った children を表示
function Son(props) {
  return (
    <div style={{background: 'lightgreen', padding: '10px', marginBottom: '10px'}}>
      <h2>息子 (Son)</h2>
      <div>{props.children}</div>
    </div>
  );
}

// Daughter コンポーネント：受け取った children を表示
function Daughter(props) {
  return (
    <div style={{background: 'lightblue', padding: '10px'}}>
      <h2>娘 (Daughter)</h2>
      <div>{props.children}</div>
    </div>
  );
}

// Parent コンポーネント：子コンポーネントのタグの間にコンテンツを記述
function Parent() {
  return (
    <div>
      <h1>私の2人の子供たち</h1>
      
      <Son>
        <p>
          これは Parent コンポーネントで記述されましたが、
          Son コンポーネントの一部として表示されます。
        </p>
      </Son>
      
      <Daughter>
        <p>
          これは Parent コンポーネントで記述されましたが、
          Daughter コンポーネントの一部として表示されます。
        </p>
      </Daughter>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <Parent />
);