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