React井字棋代码报错：Module build failed及SyntaxError求助

你的代码出现Module build failed和SyntaxError，核心是函数嵌套结构错误，再加上变量名拼写、组件props缺失等问题，以下是具体问题和修复方案：

主要错误点 #

• 函数嵌套未闭合：calculateWinner、resetBoard被错误定义在handelClick函数内部，且handelClick未正确闭合大括号，导致语法结构混乱。
• 变量名拼写错误：多处使用isNext，但实际状态变量是isXNext。
• Square组件props缺失：未给<Square />传递value和onClick属性，组件无法响应点击和显示内容。
• JSX转义字符错误：代码中的<、"是HTML转义字符，应替换为正常的<、"。
• 函数名拼写错误：handelClick应为handleClick（拼写错误）。
• 状态未绑定到JSX：状态区域硬编码内容，未使用status和winner状态值。
• Reset按钮未绑定事件：按钮未关联resetBoard函数，点击无效。

修复后的完整代码 #

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const rowStyle = {
  display: 'flex'
}

const squareStyle = {
  width:'60px',
  height:'60px',
  backgroundColor: '#ddd',
  margin: '4px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  fontSize: '20px',
  color: 'white'
}

const boardStyle = {
  backgroundColor: '#eee',
  width: '208px',
  alignItems: 'center',
  justifyContent: 'center',
  display: 'flex',
  flexDirection: 'column',
  border: '3px #eee solid'
}

const containerStyle = {
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column'
}

const instructionsStyle = {
  marginTop: '5px',
  marginBottom: '5px',
  fontWeight: 'bold',
  fontSize: '16px',
}

const buttonStyle = {
  marginTop: '15px',
  marginBottom: '16px',
  width: '80px',
  height: '40px',
  backgroundColor: '#8acaca',
  color: 'white',
  fontSize: '16px',
}

function Square({ value, onClick }) {
  return (
    <div
      className="square"
      style={squareStyle}
      onClick={onClick}>
      {value}
    </div>
  );
}

function Board() {
  const [board, setBoard] = useState(Array(9).fill(null));
  const [isXNext, setIsXNext] = useState(true);
  const [winner, setWinner] = useState(null);

  // 修复函数拼写错误：handelClick → handleClick
  const handleClick = (index) => {
    if (board[index] || winner) return;

    const newBoard = [...board];
    // 修复变量名错误：isNext → isXNext
    newBoard[index] = isXNext ? 'X' : 'O';
    setBoard(newBoard);
    setIsXNext(!isXNext);
    const currentWinner = calculateWinner(newBoard);
    if (currentWinner) {
      setWinner(currentWinner);
    }
  };

  // 将calculateWinner移到handleClick外部，修复嵌套错误
  const calculateWinner = (squares) => {
    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 [a, b, c] of lines) {
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }

    return null;
  };

  // 将resetBoard移到handleClick外部，修复嵌套错误
  const resetBoard = () => {
    setBoard(Array(9).fill(null));
    setIsXNext(true);
    setWinner(null);
  };

  // 修复变量名错误：isNext → isXNext
  const status = winner ? `Winner: ${winner}` : `Next player: ${isXNext ? 'X' : 'O'}`;

  return (
    <div style={containerStyle} className="gameBoard">
      {/* 绑定状态到JSX，替换硬编码内容 */}
      <div id="statusArea" className="status" style={instructionsStyle}>{status}</div>
      <button style={buttonStyle} onClick={resetBoard}>Reset</button>
      <div style={boardStyle}>
        <div className="board-row" style={rowStyle}>
          {/* 给Square传递value和onClick属性 */}
          <Square value={board[0]} onClick={() => handleClick(0)} />
          <Square value={board[1]} onClick={() => handleClick(1)} />
          <Square value={board[2]} onClick={() => handleClick(2)} />
        </div>
        <div className="board-row" style={rowStyle}>
          <Square value={board[3]} onClick={() => handleClick(3)} />
          <Square value={board[4]} onClick={() => handleClick(4)} />
          <Square value={board[5]} onClick={() => handleClick(5)} />
        </div>
        <div className="board-row" style={rowStyle}>
          <Square value={board[6]} onClick={() => handleClick(6)} />
          <Square value={board[7]} onClick={() => handleClick(7)} />
          <Square value={board[8]} onClick={() => handleClick(8)} />
        </div>
      </div>
    </div>
  );
}

function Game() {
  return (
    <div className="game">
      <div className="game-board">
        <Board />
      </div>
    </div>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<Game />);

修复说明 #

1. 调整函数结构：将calculateWinner、resetBoard从handleClick内部移出，确保每个函数独立定义，修复语法嵌套错误。
2. 修正变量/函数名：将isNext改为isXNext，handelClick改为handleClick，匹配状态变量名和正确拼写。
3. 完善Square组件：给每个Square传递对应位置的value和点击事件onClick，实现点击落子功能。
4. 绑定状态到JSX：将硬编码的状态文本替换为动态status变量，实时显示当前玩家或获胜者。
5. 绑定Reset按钮事件：给按钮添加onClick={resetBoard}，实现重置棋盘功能。
6. 修正JSX转义字符：将<、"替换为正常的<、"，确保JSX语法正确。

内容的提问来源于stack exchange，提问作者Sushree Biswal