Ant Design Collapse点击单面板全部展开，如何实现各面板状态独立控制

问题根因 #

当前所有折叠面板共用父组件的同一个布尔类型show状态，任意面板触发状态更新都会同步修改所有面板的显隐判断条件，因此切换单个面板会出现全部展开的问题。

改造方案 #

将父组件的单一控制状态改为按面板唯一key存储的独立状态集合即可，具体修改如下：

1. 改造父组件逻辑 #

// Parent Component 改造后代码
import { useState } from 'react';

// 初始化状态为对象，key为每个面板的唯一标识（对应传入的keys属性），value为对应面板的展开状态
const [showMap, setShowMap] = useState({
  "1": false,
  "2": false,
  "3": false,
  "4": false // 按你实际的面板数量和key值配置即可
})

// 新增接收面板key的切换方法，仅更新对应面板的状态
const handleShow = (panelKey) => {
  setShowMap(prev => ({
    ...prev,
    [panelKey]: !prev[panelKey]
  }))
}

// 渲染第一个面板，仅传入对应key=1的状态
<AntCollapse 
  isFollowed={followed[1]} 
  show={showMap["1"]} 
  keys="1" 
  setShow={() => handleShow("1")} 
  header="Follow XXX on Telegram"
>
     {/* 原有面板内容 */}
     <Row type='flex' align='middle' justify='center'>
         <Button onClick={() => {handleFollow(1); handleShow("1"); }} style={buttonStyle2} disabled={clicked}>Continue</Button> 
         <Button type='text' style={{color:'#EB7B59', border:'#f7f7f7', background:'#f7f7f7',height: "2em", fontSize:'16px', margin:'10px 0 0 10px'}}>Cancel</Button>
     </Row>
</AntCollapse>

// 渲染第二个面板，仅传入对应key=2的状态，剩余面板以此类推
<AntCollapse 
  isFollowed={followed[2]} 
  show={showMap["2"]} 
  keys="2" 
  setShow={() => handleShow("2")} 
  header="第二个面板标题"
>
  {/* 第二个面板内容 */}
</AntCollapse>

2. 子组件逻辑适配 #

子组件原有逻辑不需要大幅调整，仅需修改handlePanelClose的调用逻辑即可：

// Child Component 调整后代码
const [key, setKey] = useState([props.keys]);
// 直接调用父组件传入的、绑定了当前面板key的setShow方法即可
const handlePanelClose = () => props.setShow();
<StyledCollapse accordian activeKey={props.show ? key : []} onChange={combineFunc}> 
      <AntCollapse.Panel
        {...props}
        header={props.header}
        showArrow={false}
        bordered={false}
        key={props.keys}
        extra={
            // 原有逻辑
        }
      >
      {props.children}
      </AntCollapse.Panel>
</StyledCollapse>

动态渲染面板适配 #

如果你的面板是通过数组动态生成的，可通过遍历自动初始化状态，无需手动写死每个key的初始值：

const panelList = [/* 你的面板配置数组，每一项需包含唯一key字段 */]
// 初始化时自动生成状态映射
const [showMap, setShowMap] = useState(() => {
  return panelList.reduce((acc, panel) => {
    acc[panel.key] = false
    return acc
  }, {})
})

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