React中如何实现点击组件时重置其余所有同级兄弟组件状态

核心逻辑 #

React 不推荐直接操作DOM节点，你只需要用一个状态管理「当前选中项的标识」，所有Box的背景色由这个状态动态判断即可，框架会自动处理UI更新。

完整实现代码 #

import { useState } from 'react'

// 基础Box组件
const Box = ({ isActive, onClick }) => {
  return (
    <div
      onClick={onClick}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: isActive ? "red" : "blue",
        cursor: "pointer"
      }}
    />
  )
}

// 容器组件
const Wrapper = ({ children }) => {
  return <div style={{ display: "flex", gap: "16px" }}>{children}</div>
}

// 业务父组件
function App() {
  // 存储当前选中的Box索引，初始为null表示无选中
  const [activeIndex, setActiveIndex] = useState(null)

  return (
    <Wrapper>
      {/* 固定渲染两个Box的写法 */}
      <Box isActive={activeIndex === 0} onClick={() => setActiveIndex(0)} />
      <Box isActive={activeIndex === 1} onClick={() => setActiveIndex(1)} />

      {/* 动态批量渲染Box的写法（如果有多个）
      {Array.from({ length: 5 }).map((_, idx) => (
        <Box
          key={idx}
          isActive={activeIndex === idx}
          onClick={() => setActiveIndex(idx)}
        />
      ))}
      */}
    </Wrapper>
  )
}

export default App

说明 #

• 所有状态统一放在父组件管理，Box组件只做纯展示，根据传入的isActive属性切换背景色
• 点击某个Box时，直接把当前Box的索引更新到父组件的activeIndex状态即可，React会自动重渲染所有Box，匹配出应该高亮的项，不需要你手动遍历修改DOM样式
• 实际项目中如果Box对应业务数据，优先用业务唯一ID代替索引作为选中标识，避免索引变更导致的高亮错乱

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