6月20
React Tutorialを初めてやったとき勘違いしてたことメモ
0 Comment/
なんで上書きされないの？
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}//なんで一つ前の0を上書きしない？？
{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>
);
}→関数を呼んでいるから、上書きするわけではなく１を入れたときの結果が入るという話。
なんで多次元配列になってる？（なってない）
[
'O', null, 'X',
'X', 'X', 'O',
'O', null, null,
]
//急にどうして多次元配列にできてるの？なってない。多次元配列だとすると以下のようになる
[
['O', null, 'X'],
['X', 'X', 'O'],
['O', null, null]
]なんでrender()内で定義するの？
render() {
const history = this.state.history; //render()の上でも良くない？
const current = history[history.length - 1];
const winner = calculateWinner(current.squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
} else {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
}
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onClick={(i) => this.handleClick(i)}
/>
</div>
<div className="game-info">
<div>{status}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}Classの中はメゾットしか書けないとのことでした。
これなに？（三項演算子）
const moves = history.map((step, move) => {
const desc = move ? // ? ???
'Go to move #' + move : // : ???
'Go to game start';
return (
<li>
<button onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
);
});条件式 ? Trueの処理 : Falseの処理
https://www.sejuku.net/blog/23627
実行結果を見ると分かりますが、JavaScriptでは「null」「undefined」を条件式に当てはめるといずれも「False」と判断されてしまいます。
https://www.sejuku.net/blog/23627
つまり、history,最初の時にはnullでfalseとなるのでGo to game startとなるということでした。
