React Hooks实现侧边切换组件点击单个子项全部触发切换问题求助

问题根因 #

当前父组件仅维护了单一的全局布尔状态控制所有子项的展开/收起状态，所有ToggleItem复用同一个状态值，因此任意子项触发切换动作都会修改全局状态，导致所有子项同步变更。

修复步骤 #

1. 调整父组件状态结构 #

将原来的单一布尔状态修改为对象结构，用每个子项的唯一标识作为key，单独存储对应子项的展开状态：

// 原状态写法
const [isToggle, setIsToggle] = useState(false)

// 调整后状态写法，假设每个子项配置有唯一id字段
const [itemOpenState, setItemOpenState] = useState({})

2. 改造切换事件处理逻辑 #

触发切换时仅修改对应id子项的状态，不影响其他子项：

const handleItemToggle = (itemId) => {
  setItemOpenState(prev => ({
    ...prev,
    [itemId]: !prev[itemId]
  }))
}

3. 给子项传递独立状态 #

渲染ToggleItem时，将对应id的状态和绑定了当前id的切换方法传递给对应子组件：

{toggleItemList.map(item => (
  <ToggleItem 
    key={item.id}
    isOpen={!!itemOpenState[item.id]}
    onToggle={() => handleItemToggle(item.id)}
    {/* 保留其他原有props */}
  />
))}

4. 子组件适配新属性 #

ToggleItem组件不再使用全局的isToggle状态，改用自身接收的isOpen属性判断图标类名，触发切换时调用传入的onToggle方法即可。

附加优化建议 #

侧边整体的展开收起状态可以单独维护一个isSidebarOpen状态，和子项的展开状态完全隔离，避免两类切换逻辑互相干扰。

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