Reactでのpropsの利用法

Reactのチュートリアルをする中で、propsの挙動を理解するために調べました。

propsの使い方

propsはComponent間でのデータの受け渡しに利用されます。 renderの中で受け渡し先のComponent(以下の例ではChild)にPropertyを設定すると、this.propsからアクセスできます。これによりデータの受け渡しが実現できます。

class Parent extends React.Component {
  render() {
    const a = 10;
    const b = 20;
    return <Child p1={a} p2={b}/> // ここでPropertyを設定
  }
}

class Child extends React.Component {
  render() {
    return <div><div>p1:{this.props.p1}</div> // ここでpropからアクセス可能
      <div>p2:{this.props.p2}</div></div>;
  }
}

表示結果 p1:10 p2:20

チュートリアルのコードの中で、最初見たときに理解できなかったのは次のコードでした。 コンポーネントの構造としては、Game > Board > Squareという形で組み立てられています。 挙動としては、SquareをクリックするとGameの中に定義されているhandleClickが呼ばれるというものです。 * コード抜粋1

// Boardコンポーネントの中の処理
renderSquare(i) {
  return <Square
      value={this.props.squares[i]}
      onClick={() => this.props.onClick(i)}
    />;
}

• コード抜粋2

// GameコンポーネントにおけるBoardの呼び出し処理
<Board
  squares={current.squares}
  onClick={(i) => this.handleClick(i)}
/>

コード抜粋1の部分ではSquareのonClickが呼ばれると、BoardのpropsのonClickが呼ばれるようになっています。 そして、コード抜粋2の部分で、Boardのpropertyとしてthis(ここではGame)のhandleClickが呼ばれるようになっています。

通常は呼び出し元Component(Game)から呼び出し先のComponent(Square)に値を渡すときに使います。 しかし、この例では呼び出し元側でpropsに関数をバインドし、その関数の引数を呼び出し先で設定することで、呼び出し先(Square)の値を呼び出し元(Game)に伝えています。 Reactではこのようにpropsを活用してComponent間のデータ連携を実現するようです。