はじめに

ReactのコンポーネントにPropsの渡し方についてまとめておきます。

なお、Reactにおいては、PropsとStateであれば、Propsのほうが断然重要な要素となります。
コンポーネントを関数としてとらえると、コンポーネント内に保持するStateで表示される内容が変化するのであれば、
それは純粋関数でなくなるためです。
このため、Propsにてコンポーネントに対して値を受け渡しすることが重要となります。

単純な文字列を受ける場合のPropsの使い方

コンポーネント

import { FC } from 'react';

const HelloWorld: FC<{ name: string }> = (props) => {
  return (
    <>
      <p>Hello, {props.name}</p>
    </>
  );
};

export default HelloWorld;

呼び出し元

<HelloWorld name="John" />

解説
- FCインターフェースに型を渡すことでprops の型に適用している
  - ここでは、型は{name: string} になる
- 型が{name: string}になるので、HelloWorld関数の引数のpropsももちろん{name: string} になる
- 呼び出し元は、コンポーネントのpropsの型通りに値を呼び出し時に指定すればよい

複数の値を受け取る場合のPropsの使い方

コンポーネント

import { FC } from 'react';

type HellopWorldProps = {
  name: string;
  greetMessage: string;
};

const HelloWorld: FC<HellopWorldProps> = (props) => {
  return (
    <>
      <p>
        {props.greetMessage}, {props.name}
      </p>
    </>
  );
};

export default HelloWorld;

呼び出し元

<HelloWorld greetMessage="GoodMorning" name="John" />

解説
- コンポーネントの型となるtypeをHellopWorldPropsとして定義
- そのtypeをFCインターフェースに型として渡すことでprops の型に適用している
- なお、ここではHelloWorldコンポーネントは、propsという引数で引き渡された値を受け付けているので、 props.greetMessage 、props.nameで受け渡された値を使用している
  - ここを const HelloWorld: FC<HellopWorldProps> = ({name, greetMessage}) => { とすることで、props.*** と書かずに、 name 、 greetMessageで値を使用できる

呼び出し時に指定されない項目はデフォルト値を使う場合のPropsの使い方

コンポーネント

import { FC } from 'react';

type HellopWorldProps = {
  name: string;
  greetMessage?: string;
};

const HelloWorld: FC<HellopWorldProps> = ({ name, greetMessage = 'hello' }) => {
  return (
    <>
      <p>
        {greetMessage}, {name}
      </p>
    </>
  );
};

export default HelloWorld;

呼び出し元

<HelloWorld name="John" />

解説
- コンポーネントの型でデフォルト値を設定する項目は、?付きにして、string | undefinedのユニオン型にする
- コンポーネントの引数で、({ name, greetMessage = 'hello' })とすることで、デフォルト値を定義する
- これにより、呼び出し元は、greetMessageを指定してもよいし、指定しなくてもよくなる。