React组件间变量传递问题：Header无法正确显示玩家回合

你的问题核心是状态作用域不匹配，以及组件props传递缺失：

1. 控制玩家回合的xIsNext状态定义在Board组件内部，但Header由App直接渲染，两者没有共享状态的渠道，导致Header接收的xIsNext始终是undefined。
2. 在三元表达式xIsNext ? "X" : "O"中，undefined会被判定为false，所以Header一直固定显示"O"。
3. 额外冗余：Header组件里错误导入了Board，这完全没必要。

修复步骤： #

1. 将状态提升到共同父组件App

把xIsNext状态从Board移到App中，让App作为状态的持有者，同时传递给Header和Board：

import Board from './components/Board';
import Header from './components/Header';
import { useState } from "react";

function App() {
  const [xIsNext, setXIsNext] = useState(true);
  
  return (
    <div className="App">
      <Header xIsNext={xIsNext} />
      <Board xIsNext={xIsNext} setXIsNext={setXIsNext} />
    </div>
  );
}

export default App;

2. 修改Board组件，通过props接收状态和修改方法

移除Board内部的xIsNext状态定义，改为从props获取：

import Square from './Square';
import { useState } from "react";

export default function Board({ xIsNext, setXIsNext }) {
    const [squares, setSquares] = useState(Array(9).fill(null))
    
    function handleClick(i){
        if (squares[i]){
            return;
        }
        const nextSquares = squares.slice();
        nextSquares[i] = xIsNext ? "X" : "O";
        setSquares(nextSquares);
        setXIsNext(!xIsNext);
    }
    
    return (
        <>
        <div className="board-row">
            <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
            <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
            <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
        </div>
        <div className="board-row">
            <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
            <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
            <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
        </div>
        <div className="board-row">
            <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
            <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
            <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
        </div>
        </>  
    );
}

3. 清理Header组件，移除无用导入

删掉Header里多余的Board导入，只保留props接收和渲染逻辑：

export default function Header({xIsNext}){
    return (
        <>
        <h1>Now is turn of Player: {xIsNext ? "X" : "O"}</h1>
        </>
    );
}

原理说明 #

React中，当多个组件需要共享同一状态时，状态提升是标准解决方案：将状态移动到组件树的共同父节点，再通过props把状态和修改方法传递给子组件。这样能保证所有依赖该状态的组件都能同步更新，避免状态不一致的问题。

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