LoginSignup
0

posted at

updated at

【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など)が入る

ReactApp3.png
マスごとに数字が表示されました~

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() を呼び出すことで、ボタンがクリックされたら常に再レンダーするよう伝えることができる

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

参考文献

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0