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 []
}
最终效果: