React中如何从子组件关闭父级react-bootstrap accordion折叠面板

问题根因 #

你的方案失效有两个核心原因：

1. ref绑定对象错误：你将ref挂载到了<Accordion>根组件上，实际触发折叠交互的是<Accordion.Header>内部的可点击元素，点击根组件不会触发折叠逻辑。
2. 非受控模式的状态同步问题：你用了defaultActiveKey启用非受控模式，手动模拟DOM点击容易出现内部状态和外部预期不同步的问题，React Bootstrap的Accordion更推荐用受控模式直接控制展开状态。

修复方案（受控模式，优先推荐） #

不需要操作DOM，直接通过状态控制Accordion的展开/收起，稳定性更高。

修复后的ImageUploadAccordion.js代码 #

import React, {useState} from 'react';
import {Accordion} from 'react-bootstrap'
import ImageUpload from './ImageUpload'

export default function ImageUploadAccordion({ item }) {
  // 用activeKey控制Accordion展开状态，初始值和原defaultActiveKey保持一致为"0"（即默认收起）
  const [activeKey, setActiveKey] = useState("0");
  
  const toggleAccordion = () => {
    // 上传完成后直接把activeKey设为非当前Item的eventKey即可收起
    setActiveKey("0");
  }
  return (
    <Accordion activeKey={activeKey} onSelect={(key) => setActiveKey(key)}>
      <Accordion.Item eventKey="1">
        <Accordion.Header>
          <span className="btn btn-outline-success">Upload Images</span>
        </Accordion.Header>
        <Accordion.Body>
          <ImageUpload 
            toggle={toggleAccordion}
            item={item}
          />
        </Accordion.Body>
      </Accordion.Item>
    </Accordion>
  )
}

ImageUpload.js不需要做任何修改，原有的toggle()调用逻辑可以直接复用。

可选修复方案（ref模拟点击） #

如果坚持要用ref模拟点击的方案，只需要调整ref的挂载对象即可：

// 仅展示核心修改部分
import React, {useRef} from 'react';
// ...
const accordionRef = useRef(null);
const toggleAccordion = () => {
  accordionRef.current.click();
}
// ...
<Accordion defaultActiveKey="0">
  <Accordion.Item eventKey="1">
    {/* 把ref挂载到Accordion.Header上 */}
    <Accordion.Header ref={accordionRef}>
      <span className="btn btn-outline-success">Upload Images</span>
    </Accordion.Header>
    <Accordion.Body>
      <ImageUpload 
        toggle={toggleAccordion}
        item={item}
      />
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

该方案在部分场景下可能出现Accordion内部状态和可见状态不一致的问题，仅作为备选方案。

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