pnpm create vite react-tic-tac-toe --template react-ts cd react-tic-tac-toe pnpm i code . 

interface Props { squareContent: string | null; fillSquare: () => void; } 

interface Props { squares: Squares; statusMsg: string; nextPlayer: Player; fillSquare: (squareIdx: number) => void; } 

interface State { history: BoardPropsNeeded[]; historyIdx: number; } 

export interface Props { squareContent: string | null; fillSquare: () => void; } export type Squares = Omit[]; export default function Square(props: Props) { return ( 
 props.fillSquare()}> {props.squareContent} 
 ); } 

import React from "react"; import Square from "./Square"; import type { Squares } from "./Square"; export type Player = "X" | "O"; export interface Props { squares: Squares; statusMsg: string; nextPlayer: Player; fillSquare: (squareIdx: number) => void; } export default class Board extends React.Component { renderSquare(squareIdx: number) { const { squareContent } = this.props.squares[squareIdx]; return (  this.props.fillSquare(squareIdx)} /> ); } render(): React.ReactNode { return ( 
{this.props.statusMsg}
 {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)} 
 ); } } 

import React from "react"; import Board from "./Board"; import type { Props as BoardProps, Player } from "./Board"; import type { Squares } from "./Square"; type BoardPropsNeeded = Omit; interface State { history: BoardPropsNeeded[]; historyIdx: number; } export default class Game extends React.Component { constructor(props: any) { super(props); this.state = { history: [ { squares: new Array(9).fill({ squareContent: null }), nextPlayer: "X", statusMsg: "Next player: X", }, ], historyIdx: 0, }; } togglePlayer(): Player { const currentBoard = this.state.history[this.state.historyIdx]; return currentBoard.nextPlayer === "X" ? "O" : "X"; } fillSquare(squareIdx: number) { const history = this.state.history.slice(0, this.state.historyIdx + 1); const currentBoard = history[this.state.historyIdx]; // 先判断一下对局是否结束 结束的话就不能继续落棋 // 当前格子有棋子的话也不能落棋 if ( calcWinner(currentBoard.squares) || currentBoard.squares[squareIdx].squareContent !== null ) return; const squares = currentBoard.squares.slice(); squares[squareIdx].squareContent = currentBoard.nextPlayer; this.setState({ history: history.concat([ { squares, statusMsg: currentBoard.statusMsg, nextPlayer: this.togglePlayer(), }, ]), historyIdx: history.length, }); } jumpTo(historyIdx: number) { this.setState({ historyIdx, }); } render(): React.ReactNode { const history = this.state.history; const currentBoard = history[this.state.historyIdx]; const { nextPlayer } = currentBoard; const winner = calcWinner(currentBoard.squares); let boardStatusMsg: string; if (winner !== null) { boardStatusMsg = `Winner is ${winner}!`; } else { boardStatusMsg = `Next player: ${nextPlayer}`; } const historyItems = history.map((_, idx) => { const desc = idx ? `Go to #${idx}` : `Go to game start`; return ( 
 this.jumpTo(idx)}> {desc} 
 ); }); return ( 
 this.fillSquare(squareIdx)} />
History
{historyItems}
 ); } } const calcWinner = (squares: Squares): Player | null => { // 赢的时候的棋局情况 const winnerCase = [ [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 < winnerCase.length; i++) { const [a, b, c] = winnerCase[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a].squareContent as Player; } } return null; };