react实现井字棋高亮显示连成一线

react实现井字棋高亮显示连成一线

本文假设你已经阅读完了react教程并且实现了这个基础版的井字棋

因为接下来的内容都是在官网教程的基础上进阶完成的，还没看的小伙伴建议跟着官网教学一遍再来学习进阶版

接下来要实现的是每当有人获胜时，高亮显示连成一线的 3 颗棋子。

要实现这个功能可以采用自下而上的构建应用，也就是从最基本的组件开始编写，在官网的教学中最基本的组件是Square 组件

目前这个组件只负责渲染props.value值以及触发props的onclick事件，现在这个Square 还需要在某些条件下高亮展示背景。

自下而上的好处就是不需要关心这个props是怎么来的，只关心当前组件如何渲染。

function Square(props) {
  return (
    <button className={
      ["square", props.isWinnerSquare ? 'red-square' : null].join(' ')
    }
      onClick={props.onClick}
    >
      {props.value}
    </button>
  )
}

为组件添加新的参数isWinnerSquare，如果为真就添加class ‘red-square’

接下来考虑在父组件在render的时候如何向Square传入正确的isWinnerSquare

实现的思路是在原本的renderSquare函数中添加一个新的参数winnerSquareArray,这是一个数组如果已经获胜了那么数组装有赢家取胜的三个坐标位，如果还未取胜则为空数组。

renderSquare(i, winnerSquareArray) {
    return (
    <Square
      key={i}
      value={this.props.squares[i]}
      onClick={() => this.props.onClick(i)}
      isWinnerSquare={winnerSquareArray.includes(i)}
    />);
  }

render如下：

最后只要实现函数CalculateWinnerSquareArray就可以了，很多时候我们在实现一个功能或者一个方法的时候，总是要从结果来推导实现过程。

function CalculateWinnerSquareArray(square) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i=0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if(square[a] && square[a] === square[b] && square[a] === square[c]) {
      return [a, b, c]
    }
  }
  return []
}

最终效果：