Reactチュートリアルをやっていってみるその13
これは
Reactチュートリアルをやっていく記事です。
参考
タイムトラベル機能の追加
Stateのリフトアップ再び
Gameコンポーネント内で過去の履歴を表示するようにしたいので
Gameコンポーネントをhistoryにアクセスできるようにする。
以前SquareコンポーネントにあったstateをリフトアップしてBoardに移動した時と同様に、
BoardにあるstateをGameコンポーネントにリフトアップします。
BoardコンポーネントがsquaresとonClickプロパティをGameコンポーネントから受け取れるようにする。
以下の手順でBoardコンポーネントを修正する。
・Boardのconstructorを削除
・BoardのrenderSquareにあるthis.state.squares[i]をthis.props.squares[i]に置き換える
・BoardのrenderSquareにあるthis.handleClick(i)をthis.props.onClick(i)に置き換える
現状のBoardコンポーネントは以下のようになってます。
class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), xIsNext: true, }; } handleClick(i) { const squares = this.state.squares.slice(); if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); } renderSquare(i) { return ( <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} /> ); } render() { const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } 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> ); } }
Gameコンポーネントのrender関数を更新します。
現在はこうなってます。
gyazo.com
こうなります。
gyazo.com
Gameコンポーネントでテキスト表示できるようになったので、Boardのrenderメソッド内の類似コードは削除可能になります。
削除後
gyazo.com
handleClickメソッドをBoardコンポーネントからGameに移動していきます。
明日はhistoryの表示を行います。
今日はここまで。