React学習ログ No.9

React公式ドキュメント学習メモ：コンポーネントに props を渡す

1. Propsの基本

• Props (プロパティ) は、親コンポーネントから子コンポーネントへ情報（データ）を渡すための仕組み
• HTML属性と似ているが、オブジェクト、配列、関数など、あらゆるJavaScriptの値を渡せる
• Propsは、コンポーネントの関数に渡される唯一の引数（オブジェクト）

2. Propsの渡し方と受け取り方

渡し方 (親コンポーネント側)

子コンポーネントの属性として記述

export default function Profile() {
  return (
    <Avatar
       person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} // オブジェクト
       size={100} // 数値
    />
  );
}

受け取り方 (子コンポーネント側)

関数コンポーネントの引数で 分割代入 (Destructuring) を使って受け取るのが一般的

// 分割代入による受け取り
function Avatar({ person, size }) {
  // person, size が変数として使用
}

// 分割代入を使わない場合（同じ意味）
function Avatar(props) {
  let person = props.person;
  let size = props.size;
}

3. 応用

デフォルト値の設定

分割代入時に = を使ってデフォルト値を指定できる

function Avatar({ person, size = 100 }) {
  // sizeが渡されない、または undefined の場合に 100 が使われる
}

JSXスプレッド構文によるPropsの転送

親コンポーネントが受け取ったpropsを、個別に記述せず子コンポーネントに一括で渡すことができる

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} /> // propsの内容を全てAvatarに渡す
    </div>
  );
}

children Prop

• コンポーネントの開始タグと終了タグの間にネストされたJSX（コンテンツ）は、特別な children というpropsとして親に渡される
• ラッパーやレイアウトコンポーネントで利用

// Profile側
<Card>
  <Avatar /> // ← この<Avatar />全体が children になる
</Card>

// Card側
function Card({ children }) {
  return (
    <div className="card">
      {children} // 受け取ったコンテンツを配置
    </div>
  );
}

4. Propsの性質

• Propsは読み取り専用（イミュータブル）である
• コンポーネント内でその値を直接書き換えてはいけない
• 表示内容を変化させる必要がある場合は、Stateを使う必要がある