Learn React
UI の記述

コンポーネントに props を渡す

React コンポーネントは互いにやりとりをする際に props というものを使います。親コンポーネントは子コンポーネントに props を渡すことで情報を伝えることができるのです。props は HTML の属性と似ていると思われるかもしれませんが、props ではオブジェクトや配列、関数などのあらゆる JavaScript の値を渡すことができます。

このページで学ぶこと

  • コンポーネントに props を渡す方法
  • コンポーネントから props を読み出す方法
  • props のデフォルト値を指定する方法
  • コンポーネントに JSX を渡す方法
  • props は時間とともに変化する

お馴染みの props

props とは JSX タグに渡す情報のことです。例えば className、src、alt、width や height は、<img> に渡すことのできる props の例です。

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://react.dev/images/docs/scientists/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

<img> に渡すことができる props の種類は事前に決められています（ReactDOM は HTML 標準に準拠しています）。しかし <Avatar> のようなあなた独自のコンポーネントの場合は、任意の props を渡してそれをカスタマイズできます。以下でやり方を説明します。

コンポーネントに props を渡す

以下のコードでは、Profile コンポーネントは子コンポーネントである <Avatar> に何の props も渡していません。

export default function Profile() {
  return (
    <Avatar />
  );
}

以下の 2 ステップで、Avatar に props を与えることができます。

Step 1: 子コンポーネントに props を渡す