显示每一步棋

我们把游戏进行到现在所走的每一步棋都展示出来。我们已经知道，React元素是JS的“第一类JS对象(first-class JS objects)”，可以被储存、传送。为了渲染多个React的多个条目，我们传入了一个包含React元素的数组。构建它最常用的方法就是，对你的数组使用.map。在Game组件的render方法中，咱们就这么干：

code ``` render() { const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares);

const moves = history.map((step, move) => {
  const desc = move ?
    'Move #' + move :
    'Game start';
  return (
    <li>
      <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
    </li>
  );
});

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>{moves}</ol>
    </div>
  </div>
);

} ```

查看最新的代码

对于历史记录里的每一个步骤，我们都建立一个列表条目<li>，里面有一个<a>标签，它不指向任何地址（href="#"），而是会带有一个点击事件处理器，我们很快就会实现它。写代码至此，你应该会得到一个列表，记录着游戏中的历史步骤，还有一行警告：

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of "Game".

现在，我们来谈谈这条警告是什么意思。