基礎

props

なぜ学ぶか： AIが作る画面は「同じ部品の使い回し」でできています。カードが10枚並んでも部品は1つで、違うのは渡すデータだけ。そのデータの渡し方がpropsです。まずは例から。

まずはこの例を見てみましょう

// 受け取る側: name と age を受け取って表示する部品
function UserCard({ name, age }: { name: string; age: number }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age}歳</p>
    </div>
  );
}

// 使う側: 同じ部品に違うデータを渡す
<UserCard name="Ada" age={36} />
<UserCard name="Grace" age={45} />

部品（UserCard）は1つ、データ（props）が2通り。「部品を使い回し、データだけ差し替える」のがReactの基本です。

props＝コンポーネントに渡す引数

例のname="Ada" age={36}のように、タグに書いた属性がそのまま関数に渡ります。関数の引数と同じ考え方です。

受け取りは分割代入が定番

function UserCard({ name, age }) — 前にやった分割代入で「取り出しながら受け取る」形です。AIはほぼこの形で書きます。

文字列はそのまま、それ以外は{ }

name="Ada"はそのまま、数値や変数はage={36}のように波カッコで渡します。

propsは書き換えない

受け取ったpropsを中で書き換えるのはReactのルール違反です。変化するデータは、この後やるstateの担当です。

ステップ 1 / 3

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。