【React】公式のチュートリアルをやってみる～③propsとstate

【React】公式のチュートリアルをやってみる～②プロジェクト用ファイル作成 の続きです。
三目並べゲームに必要な部品をそろえていきます。

propsを使って値を受け渡す

propsとは？

• 親コンポーネントから子コンポーネントにデータを渡すことができるオブジェクトのこと
• propsは読み取り専用で、変更はできない
• propsは、「プロパティ」の意味

Boardコンポーネントから、Squareコンポーネントに値を渡す

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i}/>;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

• Squareコンポーネントを呼び出し、そのときに props として {value: i} を渡す
  • ここでのiは引数で受け取った値（0,1など）が入る

Squareコンポーネントで、Boardコンポーネントから受け取った値を表示する

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

• Squareコンポーネントは出力として i 要素を返す
  • ここでのiは親コンポーネントから受け取った値（0,1など）が入る

マスごとに数字が表示されました～

stateを使ってインタラクティブなコンポーネントを作る

stateとは？

• データを動的に更新することができる
• stateは、コンポーネントの内部で制御される

this.state の初期状態を設定するコンストラクタを追加する

class Square extends React.Component {
  // コンストラクタ
  constructor(props){
    super(props);
    this.state = {
      value: null,
    }
  }
  (略)
}

• propsを引数として親クラスのコンストラクタを呼び出す必要がある

ボタンをクリックするたびにデータ更新する

class Square extends React.Component {
  // コンストラクタ
  (略)
  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {this.state.value}
      </button>
    );
  }
}

• stateの更新をスケジュールするために this.setState() を使用する
• onClick時にthis.setState() を呼び出すことで、ボタンがクリックされたら常に再レンダーするよう伝えることができる

ボタンを押したらマスにXが表示されるようになりました～

参考文献

• https://ja.reactjs.org/tutorial/tutorial.html
• https://ja.reactjs.org/docs/components-and-props.html
• https://ja.reactjs.org/docs/state-and-lifecycle.html
• https://ja.reactjs.org/docs/faq-state.html