children
中身を差し込める枠
プロフィールも作品も、同じ見た目の枠に入れて並べたいことがあります。枠の見た目は共通で、中身だけが違う。この「中身を外から差し込める部品」を作る仕組みが children です。
React では、開きタグと閉じタグではさんだ中身が children という props で届きます。
function Card({ children }) {
return <div className="card">{children}</div>;
}使う側は、HTML のタグのようにはさむだけです。
<Card>
<p>あおい</p>
<p>Web エンジニア</p>
</Card>はさんだ2つの p が、そのまま {children} の場所に出ます。<Card /> のように自分で閉じる書き方をすると children は空になり、枠だけが出ます。
children はほかの props と一緒に使える
children は特別な名前が付いているだけで、ふつうの props と同じです。だから見出しは属性で、中身ははさんで、という組み合わせができます。
function Card({ title, children }) {
return (
<div className="card">
<h2 className="card-title">{title}</h2>
{children}
</div>
);
}<Card title="プロフィール">
<Profile name="あおい" title="Web エンジニア" />
</Card>Card は中に何が入るかを知りません。知らなくていい、というのがこの部品の強みです。あとから中身がフォームでも画像でも、Card はそのまま使い回せます。
props で渡すのと何が違うのか
<Card body={...} /> のように JSX を props で渡すこともできますが、はさむ書き方のほうが読みやすいです。入れ子の見た目が、そのまま画面の入れ子と一致するからです。中身が1つの値なら属性、中身が「ここに入る見た目のかたまり」なら children、と使い分けます。
つまずきどころ
children を書き忘れた Card はよくある事故です。<div className="card"> だけを返して {children} を置き忘れると、はさんだ中身はどこにも出ません。エラーも出ないので、枠だけが並ぶ不思議な画面になります。「中身が消えた」と思ったら、まず {children} を置いたかを見てください。
演習
見出し付きの枠になる Card コンポーネントを作り、プロフィールと作品をそれぞれ包みます。