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

前の章の最後、同じCardを3枚コピペしましたね。全部「学習コンテンツ」。3枚のカードに違う言葉を出したい——今日、その道具を手に入れます。propsです。

propsは「部品への差し込みデータ」

結論のコードから見ます。

type GreetingProps = {
  name: string;
};

const Greeting = ({ name }: GreetingProps) => {
  return <h1>こんにちは、{name}さん</h1>;
};

const App = () => {
  return (
    <div>
      <Greeting name="太郎" />
      <Greeting name="花子" />
    </div>
  );
};

表示は「こんにちは、太郎さん」「こんにちは、花子さん」。同じ部品から、違う表示が生まれました。

仕組みを分解します。使う側(親のApp)は、タグに name="太郎" と属性のような形でデータを添えます。受け取る側(子のGreeting)は、引数でそれを受け取ります。この受け渡しされるデータがpropsです。

受け取り口、見覚えがありますね