Children Prop

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 20/42。

1つのプロップは特別です。開始タグと終了タグを持つコンポーネントをWrite（記述）すると、それらの間にネストしたものはすべて children プロップとして届きます：

function Card({ children }) {
    return <div className="card">{children}</div>;
}

<Card>
    <p>Any content!</p>
</Card>

Card はその中に何があるかを知る必要も気にすることもなく、スタイル設定されたボックスで包むだけです。カード、モーダル、レイアウトのようなラッパーはすべて children を使用します。親がコンテンツを提供し、コンポーネントがフレームを提供します。

チャレンジ

中級

再利用可能なカードフレームを作成します。

Card が children を表示する className="card" を持った <div> をレンダリングするようにします。
App 内で、<Card>...</Card> を使用して、id="card-text" とテキスト Welcome aboard を持つ <p> を囲みます。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>