React 如何将嵌套对象除指定项外其余值设为false实现手风琴效果

代码修改方案 #

你原代码的问题是仅修改了当前点击面板的状态，没有重置其他面板的状态，按以下逻辑修改handleShowPanel即可实现手风琴效果：

// Child component 修正后的代码
const handleShowPanel = (id) => {
  // 先获取当前点击面板的原有展开状态
  const currentPanelOpen = props.show[id]
  props.setShow(prev => {
    // 第一步：把所有面板的状态先重置为false
    const resetState = Object.fromEntries(
      Object.entries(prev).map(([key]) => [key, false])
    )
    // 第二步：如果点击前当前面板是关闭状态，就把它设为展开；如果已经是展开状态，就保持所有关闭（支持点击收起）
    if (!currentPanelOpen) {
      resetState[id] = true
    }
    return resetState
  })
}

逻辑说明 #

• 修正了你原有代码中const val = !props.show的错误：props.show是存储所有面板状态的对象，需要取对应id的属性值才能拿到当前面板的布尔状态
• 每次点击时先统一关闭所有面板，再根据当前面板的原有状态决定是否展开，保证同一时间最多只有一个面板处于展开状态，和antd手风琴的交互逻辑完全一致

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