6月
20

なんで上書きされないの?

 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>
        );
    }

→関数を呼んでいるから、上書きするわけではなく1を入れたときの結果が入るという話。

なんで多次元配列になってる?(なってない)

[
  '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となるということでした。

About the Author

Leave a Reply