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