React井字棋字体颜色异常：X/O颜色无法固定

问题根源 #

当前代码中，所有方块的颜色依赖全局状态xIsNext（控制下一个落子玩家），每次落子都会切换这个状态，导致所有方块的颜色同步变化，无法根据自身是X还是O保持固定颜色。

解决方案 #

移除active属性，直接根据方块自身的value值判断颜色：

1. 修改Square组件，根据props.value设置对应颜色
2. 移除Board组件中传递给Square的active属性

修改后的代码 #

Square组件

const Square = (props) => {
    let color = "black"; // 空方块默认颜色可自定义
    if (props.value === "X") {
        color = "green";
    } else if (props.value === "O") {
        color = "red";
    }

    return (
        <button
            className="square"
            onClick={props.onClickEvent}
            style={{ color: color }}
        >
            {props.value}
        </button>
    );
};

Board组件中的renderSquare方法

const renderSquare = (i) => {
    return (
        <Square
            value={squares[i]}
            onClickEvent={() => handleClickEvent(i)}
        />
    );
};

效果说明 #

修改后，X会固定显示绿色，O固定显示红色，空方块使用默认颜色，后续落子操作不会改变已存在的X/O的颜色，完全符合需求。

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