propsで値を渡す

導入

部品に外から値を渡せると、同じ部品を「中身だけ変えて」使い回せます。この受け渡しが props です。

説明

Greeting が props.name を受け取り、呼び出し側が name="..." で渡します。

function Greeting(props) {
  return <h2>こんにちは、{props.name} さん</h2>;
}

function App() {
  return (
    <div>
      <Greeting name="さくら" />
      <Greeting name="たろう" />
      <Greeting name="はな" />
    </div>
  );
}

• <Greeting name="さくら" /> … name という props を渡しています。
• 部品側は props.name で受け取ります。
• 数値やオブジェクトを渡すときは波かっこで count={3} のように書きます。

よく使う書き方として、引数を分割代入して受け取ると読みやすくなります。

function Greeting({ name }) {
  return <h2>こんにちは、{name} さん</h2>;
}

function App() {
  return <Greeting name="React" />;
}

やってみよう

Greeting に age（年齢）props を追加し、「こんにちは、〇〇さん（△△歳）」のように表示してみましょう。