React官方Tic Tac Toe教程改進

只列舉前三個，主要是網上許多改進版的第一個座標寫的都及其複雜，這裏出個簡化版的。

1、在遊戲歷史記錄列表顯示每一步棋的座標，格式爲 (列號, 行號)

  export class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(9).fill(null),
                x: 0,     // 行號
                y: 0,     // 列號
            }],
            xIsNext: true,
            stepNumber: 0,
        }
    }


   handleClick(i) {
        // 省略官方代碼
        this.setState({
            history: history.concat([{
                squares: squares,
                x: Math.floor(i / 3),          // 行號
                y: i % 3                       // 列號
            }]),
            stepNumber: history.length,
            xIsNext: !this.state.xIsNext,
        });
   }
    // 省略官方代碼
  render() {
     // 省略官方代碼
     return (
		  <li key={move}>
		    <button onClick={() => this.jumpTo(move)} className={bold}>{desc},座標({step.x + 1}:{step.y + 1})</button>
		  </li>
		);
    // 省略官方代碼
  }
}

2、在歷史記錄列表中加粗顯示當前選擇的項目

 render() {
     // 省略官方代碼
      const desc = move ?
                'Go to move #' + move :
                'Go to game start';
     const bold = this.state.stepNumber === move ? 'bold' : '';
     return (
		  <li key={move}>
		    <button onClick={() => this.jumpTo(move)} className={bold}>{desc},座標({step.x + 1}:{step.y + 1})</button>
		  </li>
		);
     // 省略官方代碼

css:

.bold {
  font-weight: bold;
}

3 、使用兩個循環來渲染出棋盤的格子，而不是在代碼裏寫死（hardcode）

class Board extends React.Component {
renderSquare(i) {
    return <Square
            value={this.props.squares[i]}
            onClick={() => this.props.onClick(i)}
            key={i}
           />;
    }
    render() {
        return (
            <div>
                    {Array(3).fill(null).map((item1,i) => {
                        return (<div className="board-row" key={i}>
                            {Array(3).fill(null).map((item2,j) => {
                                return this.renderSquare(3 * i + j)
                            })}
                        </div>)
                    })}
            </div>
        )
    }
}