-
- {this.renderSquare(0)}
- {this.renderSquare(1)}
- {this.renderSquare(2)}
-
-
- {this.renderSquare(3)}
- {this.renderSquare(4)}
- {this.renderSquare(5)}
-
-
- {this.renderSquare(6)}
- {this.renderSquare(7)}
- {this.renderSquare(8)}
-
-
- );
- }
-}
-
-class Game extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- history: [{
- squares: Array(9).fill(null),
- }],
- xIsNext: true,
- };
- }
-
- handleClick(i) {
- const history = this.state.history;
- const current = history[history.length - 1];
- const squares = current.squares.slice();
- if (calculateWinner(squares) || squares[i]) {
- return;
- }
- squares[i] = (this.state.xIsNext ? 'X' : 'O');
- this.setState({
- history: history.concat([{
- squares: squares,
- }]),
- xIsNext: !this.state.xIsNext,
- });
- }
-
- render() {
- const history = this.state.history;
- const current = history[history.length - 1];
- const winner = calculateWinner(current.squares);
- let status;
- if (winner) {
- status = 'Winner: ' + winner;
- } else {
- status = 'Next: ' + (this.state.xIsNext ? 'X' : 'O');
- }
-
- return (
-