props — 親から子へデータを渡す

部品に「材料」を渡したい

ヘッダーのように中身が固定の部品もありますが、『名前だけ違うカード』のように、形は同じで中身だけ変えたい部品もあります。このとき使うのがpropsです。propsは、親コンポーネントから子コンポーネントへデータを渡す仕組みで、関数の引数によく似ています。

// 渡す側(親)
function App() {
  return <UserCard name="太郎" />;
}

受け取る側の子コンポーネントは、引数としてpropsを受け取ります。よく使うのは、必要な値だけを{ }で取り出す『分割代入』の書き方です。{ name }と書けば、渡されたnameをそのまま使えます。

// 受け取る側(子)
function UserCard({ name }: { name: string }) {
  return <div className="card">ようこそ、{name} さん</div>;
}

同じ部品に違うデータ = 再利用

propsの本当のうれしさは再利用です。同じUserCardに違うnameを渡すだけで、何枚でも違うカードを作れます。部品は1つ、データは何通りでも。これが『部品化』のごほうびです。

function App() {
  return (
    <div>
      <UserCard name="太郎" />
      <UserCard name="花子" />
      <UserCard name="次郎" />
    </div>
  );
}

function TaroCard() {
  return <div className="card">ようこそ、太郎 さん</div>;
}
// 花子さん用にはまた別の部品が必要...

function UserCard({ name }: { name: string }) {
  return <div className="card">ようこそ、{name} さん</div>;
}
// <UserCard name="花子" /> のように渡すだけ

children: タグで挟んだ中身も渡せる

もう1つ、childrenという特別なpropsがあります。<Box>ここが中身</Box>のように開始タグと終了タグで挟んだものは、childrenとして子コンポーネントに届きます。今は『タグで囲んだ中身も渡せる』とだけ知っておけば十分です。

function Box({ children }: { children: React.ReactNode }) {
  return <div className="box">{children}</div>;
}

// 使う側: <Box>ここが中身になる</Box>