children

React入門 / 全 6 枚

枠は共通、中身は差し込む

見た目の枠を複製せず、中身だけを外から差し込めるようにします。枠の div と h2 は Card の中に1回だけ書けば済みます。

枠ごと重複して書く

<div className="card">
  <h2 className="card-title">プロフィール</h2>
  <p className="name">あおい</p>
</div>

<div className="card">
  <h2 className="card-title">作品</h2>
  <p>レシピ検索アプリ</p>
</div>

Cardに中身をはさむ

<Card title="プロフィール">
  <p className="name">あおい</p>
</Card>

<Card title="作品">
  <p>レシピ検索アプリ</p>
</Card>

1 / 6

← → キーでも送れます

このスライドが付いているレッスンを開く