React状态与组件通信问题：方块颜色重置功能实现困惑

核心问题分析 #

你之前把颜色状态提升到父组件后出现同步变化，是因为用了单个状态变量控制所有方块，所有方块共享同一个值，自然会一起变。要让每个方块独立又能被父组件统一重置，得给每个方块分配独立的状态项。

具体实现步骤 #

• 父组件维护独立状态数组
  用数组存储每个方块的颜色，初始值对应5个方块的默认颜色：

  const [squareColors, setSquareColors] = useState(Array(5).fill('#ffffff'));
  

• 给每个Square传递专属状态和更新逻辑
  循环渲染时，给每个Square传对应索引的颜色，以及只修改该索引颜色的点击回调：

  {squareColors.map((color, index) => (
    <Square
      key={index}
      color={color}
      onClick={() => {
        // 复制原数组，避免直接修改状态
        const updatedColors = [...squareColors];
        // 给当前索引的方块设置新颜色（用你原来的随机颜色逻辑）
        updatedColors[index] = `#${Math.floor(Math.random()*16777215).toString(16)}`;
        setSquareColors(updatedColors);
        // 同时更新总点击数
        setTotalClicks(prev => prev + 1);
      }}
    />
  ))}
  

• 简化Square组件为受控组件
  Square不再自己维护状态，只负责渲染父组件传递的颜色和触发点击事件：

  function Square({ color, onClick }) {
    return (
      <div
        className="square"
        style={{ backgroundColor: color }}
        onClick={onClick}
      />
    );
  }
  

• 重置按钮统一重置状态
  点击重置时，同时把总点击数和颜色数组恢复初始值：

  const handleReset = () => {
    setTotalClicks(0);
    setSquareColors(Array(5).fill('#ffffff'));
  };
  

这样每个方块有独立的颜色状态，父组件可以精准控制每个方块的颜色，重置时也能一次性把所有方块恢复默认色，同时重置点击计数。

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