Ant Design Collapse点击按钮自动关闭面板功能失效排查求助

核心问题点 #

• 类型不匹配：AntD Collapse 组件的activeKey属性需要和Panel的key值对应，你父组件传入的isOpened是数组类型（["1"]/[]），但子组件内部初始化open状态用了布尔值true，类型完全不匹配，导致面板激活状态识别错误。
• 组件引用错误：父组件中使用的标签是AntCollapse，但你自定义的组件名称是CustomCollapse，导入和使用的组件名不统一。
• 事件绑定错误：子组件中onChange={combineFunc()}直接加了括号，相当于组件渲染时就立即执行该函数，而非点击面板触发change事件时执行，应该去掉括号传入函数引用。
• 函数定义错误：setFun2定义为高阶函数（返回函数的函数），直接调用setFun2()不会执行内部的setOpen逻辑，需要调用它的返回值才能触发状态更新。
• 冗余状态导致不同步：子组件内部单独维护了open状态，同时又监听props.isOpened更新，容易出现父子状态不同步的问题，建议直接使用父组件传入的控制状态，无需内部额外维护。
• 存在未定义变量/拼写错误：子组件中直接使用了setDisabled、followed、disabled、tickIcon、arrowDownIcon等未定义变量，样式属性marginLRight拼写错误，应为marginRight。

修复后的代码 #

./CustomCollapse.js #

import { Collapse as AntCollapse } from 'antd';
// 提前导入你用到的图标、styled组件、styles等依赖
const CustomCollapse = (props) => {
  // 移除内部冗余open状态，直接用props传入的isOpened控制
  const combineFunc = (activeKey) => {
    // 原setDisabled逻辑如果是内部状态要补全定义，是父组件逻辑就通过props传入回调触发
    props.onChange?.(activeKey);
  }

  return (
    <StyledCollapse activeKey={props.isOpened} onChange={combineFunc}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={
          <span>
            <span style={{ color: "#0076de", float: "right" }}>
              {/* followed从props.isFollowed取值 */}
              {props.isFollowed ? <div id={styles.emptyBox}><p>+10</p></div> : <img src={tickIcon} alt="" style={{height:'1.2em', marginRight:'10px', width:'auto', objectFit:'contain'}} />}
              {/* disabled从props.isDisabled取值 */}
              {props.isDisabled ? <div id={styles.themeBox}><p>+10</p></div> : <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginRight:'10px', width:'auto', objectFit:'contain'}} />}
            </span>
          </span>
        }
      >
      {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

./FollowTelegram.js #

const [open, setOpen] = useState(["1"]);
const handleSubmit = () => {
  // 传空数组即可关闭所有匹配key的面板
  setOpen([]);
}

//{...somecode}

// 替换为自定义组件的标签名
<CustomCollapse 
  isDisabled={disabledCollapse} 
  isFollowed={followed} 
  isOpened={open} 
  onChange={setOpen} // 把状态更新方法传入子组件，支持内部点击切换面板状态
  id={styles.telegramHeader1} 
  header="Follow XXX on Telegram Announcement Channel"
>
  <Row type='flex' align='middle' justify='center'>
    <Button 
      onClick={() => {setFollowed(); toggleDisabledCollapse(); handleSubmit();}} 
      style={buttonStyle2} 
      disabled={clicked}
    >
      Continue
    </Button> 
  </Row>
</CustomCollapse>

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