【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が表示されるようになりました～