React：如何实现点击仅单个组件为active状态，其余组件自动移除active状态

你当前父层的状态管理逻辑本身没有问题，出现多组件同时保留active状态的核心原因是：子组件没有和父层存储的全局激活ID做绑定判断，你没有把当前激活的组件标识同步给所有子组件，导致每个子组件只会记录自己是否被点击过，不知道其他组件被点击时要取消自身的激活态。

步骤1：父组件给子组件传递全局激活ID #

修改你渲染MyComponent的代码，新增activeId属性，把当前存的激活组件ID传给每一个子组件：

<MyComponent
  key={index}
  card={card}
  clickHandler={updateActiveComponent}
  activeId={activeComponent?.id} // 新增该行
/>

步骤2：子组件内部根据激活ID判断是否展示active状态 #

在MyComponent内部，把自身卡片的ID和传入的activeId做比对，只有匹配时才添加active类名，同时要确保点击事件触发时正确把当前组件的卡片对象回传给父层：

// MyComponent 内部示例实现
const MyComponent = ({ card, clickHandler, activeId }) => {
  return (
    <div 
      // 核心互斥判断逻辑
      className={`component-card ${card.id === activeId ? 'active' : ''}`}
      onClick={(e) => clickHandler(e, card)}
    >
      {/* 你的组件业务内容 */}
    </div>
  )
}

注意事项 #

• 要确保所有组件的card.id是全局唯一的，否则会出现多个组件同时匹配激活ID的问题
• 如果需要实现点击组件外空白区域取消激活状态，可以在父组件加全局点击事件监听，判断点击目标不在激活组件内时调用closeActiveComponent即可。

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