mosya

コンポーネント同士を入れ子にする

React入門19 / 10

React では、コンポーネントを他のコンポーネント内に「入れ子」にすることで、同じコンポーネントをいろいろな場所で使い回したり、コードをすっきり整理したり、特定の機能をひとまとめにしたりするのに役立ちます。

children を利用する

React コンポーネントを「入れ子」にする方法の一つは、「children」プロパティを利用することです。
children（チルドレン）とは特別なPropsで、コンポーネントのタグに挟まれた内容を指します。

ハンバーガーでたとえると、外側のバンズがコンポーネントのタグのようなものです。バンズの間には、さまざまな具材（レタス、トマト、チーズ、パティなど）を挟みます。
Reactのchildrenは、このハンバーガーの具材のようなものです。

AppとCardという2つのコンポーネントを使った例を見てみましょう！

App.jsx

コンポーネントの開始タグと終了タグの間にある要素が、childrenです。
このコードではh2やpタグ、さらにはCardImageのような別のコンポーネントも含まれます。
これらは、Cardコンポーネントにchildrenとしてデータを渡します。

Card.jsx

Cardコンポーネントはtitleとchildrenという2つのpropsを受け取って、それぞれ指定された場所に表示します。
{children}は、さきほどのCardコンポーネントのタグに挟まれた部分を示しています。

下のコードはこれらをまとめて、タイトル、テキスト、画像を含む2つのカードを表示した実際のコードです。

import {
  Card,
  CardImage,
} from "./Card.jsx";

export function App() {
  return (
    <div>
      <Card title="タイトル1">
        <p>ここに本文が入ります。</p>
        <CardImage
          src="https://static.mosya.dev/react-props-children/sample-img.png"
          alt="サンプル画像"
        />
      </Card>
      <Card title="タイトル2">
        <p>ここに本文が入ります。</p>
        <CardImage
          src="https://static.mosya.dev/react-props-children/sample-img.png"
          alt="サンプル画像"
        />
      </Card>
    </div>
  );
}

childrenを使うと、1つのコンポーネントを別のコンポーネントの中に簡単に入れることができるんだね！
それに、どのコンポーネントがどの中にあるのかがはっきり分かって、コードの整理や修正もしやすくなるね！