React中如何通过key/id循环重置所有子按钮的背景色为初始值

核心问题是当前每个子按钮的颜色状态由子组件内部独立管理，父组件无法直接跨组件修改子组件内部状态，因此需要把状态提升到父组件统一管理，通过子元素id匹配的方式实现批量重置，具体修改如下：

步骤1：调整父组件状态管理 #

将选中的子按钮id集合放在父组件用React状态管理，替代原来的普通变量totalNumbers，保证状态变更能触发UI重渲染。

步骤2：改造子组件逻辑 #

移除子组件内部的颜色状态，改为通过父组件传入的匹配规则动态计算背景色。

步骤3：实现ClearGame重置逻辑 #

点击清空按钮时直接重置父级的选中id集合，所有子按钮会自动匹配状态重置为初始背景色。

修改后的完整代码： #

const newBet: React.FC = () => {
  // 父组件统一管理所有选中的按钮id
  const [selectedNumbers, setSelectedNumbers] = useState<number[]>([])
  // 取当前游戏的配置
  const currentGame = gamesJson[whichLoteriaIsVar]

  const clearGame = () => {
    // 直接清空选中集合，所有子按钮会自动重置背景色
    setSelectedNumbers([])
  };

  // 子组件改为无内部状态的受控组件
  const NumbersParent = (props: { id: number, children: React.ReactNode }) => {
    // 通过id判断当前按钮是否被选中
    const isSelected = selectedNumbers.includes(props.id)
    // 动态计算背景色
    const bgColor = isSelected ? currentGame.color : '#ADC0C4'

    const changeButtonColor = () => {
      if (isSelected) {
        // 取消选中：从集合中移除当前id
        setSelectedNumbers(prev => prev.filter(num => num !== props.id))
      } else {
        // 新增选中：往集合中加入当前id
        setSelectedNumbers(prev => [...prev, props.id])
      }
    };

    return (
      <Numbers style={{ backgroundColor: bgColor }} onClick={changeButtonColor}>
        {props.children}
      </Numbers>
    );
  };

  return (
    <>
      <NumbersContainer>
        {numbersList.map((num) => (
          <NumbersParent key={num} id={num}>
            {formatNumber(num)}
          </NumbersParent>
        ))}
      </NumbersContainer>
      {/* 修正原代码onClick缺等号的问题 */}
      <ClearGame onClick={clearGame}>Clear Game</ClearGame>
    </>
  );
};

原理解释 #

• 我们用父级的selectedNumbers数组存储所有选中按钮的id，刚好匹配你需要通过id属性控制的需求
• 每个子按钮渲染时都会判断自己的id是否在selectedNumbers里，自动匹配对应的背景色
• 清空操作只需要重置父级的数组，所有子按钮会自动响应状态变更，不需要循环操作DOM或者子组件实例，符合React的单向数据流设计

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