React组件状态问题：点击切换颜色时重置前一个组件为黑色

你的问题核心在于每个Square组件各自独立维护自己的颜色状态，组件之间无法共享状态，所以没法判断另一个组件的颜色并重置它。解决思路是把状态提升到父组件，由父组件统一管理两个方块的颜色，子组件只负责接收颜色和点击事件。

具体实现步骤： #

• 父组件中维护两个方块的颜色状态（用数组存储更方便）
• 父组件定义点击处理函数：点击某个方块时，先检查另一个方块的颜色是否为橙色，若是则重置为黑色，再将当前点击的方块设为橙色
• 子组件Square改为受控组件，通过props接收颜色和点击回调

代码示例： #

父组件（比如App.js）

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

const App = () => {
  // 用数组存储两个方块的颜色，初始都是黑色
  const [squareColors, setSquareColors] = useState(['black', 'black']);

  const handleSquareClick = (index) => {
    setSquareColors(prevColors => {
      // 复制之前的状态，避免直接修改原数组
      const newColors = [...prevColors];
      // 获取另一个方块的索引
      const otherIndex = index === 0 ? 1 : 0;
      // 如果另一个方块是橙色，重置为黑色
      if (newColors[otherIndex] === 'orange') {
        newColors[otherIndex] = 'black';
      }
      // 将当前点击的方块设为橙色
      newColors[index] = 'orange';
      return newColors;
    });
  };

  return (
    <div>
      <Square color={squareColors[0]} onClick={() => handleSquareClick(0)} />
      <Square color={squareColors[1]} onClick={() => handleSquareClick(1)} />
    </div>
  );
};

export default App;

子组件（Square.js）

const Square = ({ color, onClick }) => {
  // 子组件不再自己维护状态，完全由父组件控制
  return (
    <div
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: color,
        margin: '10px',
        cursor: 'pointer'
      }}
      onClick={onClick}
    />
  );
};

export default Square;

关键点说明： #

• 状态提升后，父组件拥有所有方块的状态，能轻松实现跨组件的状态控制
• 使用函数式更新setSquareColors(prevColors => ...)确保每次更新都基于最新的状态
• 子组件变成纯展示组件，只负责渲染和触发点击事件，逻辑更清晰

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