基于React制作一个简易的五子棋游戏

今天学习React看官方文档，有个九宫格游戏示例，自己就想着自己写一个五子棋的案例

先看效果：（X和O分别表示黑棋和白棋）

主要功能：

1.点击棋盘位置渲染黑白棋子（同一位置渲染一次，不覆盖）。

2.当一种棋子成5个连在一起，结束游戏，提示那种棋子胜利。

3.底部历史记录，可点击记录回到记录的那一步。

根据React官方文档提供的九宫格游戏示例，可知五子棋主要更改的地方有棋盘大小，判断输赢。

官方文档通过手写渲染的棋盘：

return (
    <>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );

9*9的棋盘就要写这么多代码，那要写一个10*10的那不得全部代码来写棋盘了，所以我们可以通过循环渲染一个棋盘来减少不必要的代码（可随意更改N*N的棋盘），代码如下（示例为9*9棋盘）：

return (
    <>
      {/* 遍历渲染棋盘 */}
      {Array(9).fill(null).map((_, row) => (
        <div className="board-row" key={row}>
          {Array(9).fill(null).map((_, col) => (
            <Square
              key={col}