Bootstrap 5 Accordion点击后内容短暂显示随即消失问题排查

你使用的代码如下：

样式代码 #

const accordionStyle = {
  marginBottom: '25%',
};
const accordionHeadStyle = {
  marginTop: '2%',
  borderRadius: 80,
};
const accordionBodyStyle = {
  borderBottomLeftRadius: 80,
  borderBottomRightRadius: 80,
  backgroundColor: 'red',
};

组件代码 #

<Accordion.Item eventKey="0" >
  <Accordion.Header type="header" style={accordionHeadStyle} className="accordion-header-with-icon" >Accordion 1 Title
  </Accordion.Header>
  <Accordion.Body style={accordionBodyStyle}>
    ACCORDION 1 CONTENT
  </Accordion.Body>
</Accordion.Item>
</Accordion>

可能导致该问题的原因如下：

• Accordion.Header的type="header"属性错误：React Bootstrap的Accordion.Header组件不需要设置type="header"，这个属性会将其渲染为原生<header>标签，而非触发折叠的按钮元素。点击时浏览器会触发默认行为干扰折叠状态，导致Body闪显后消失，直接移除该属性即可。
• 组件层级不完整：代码片段中只显示了</Accordion>闭合标签，若实际代码中缺失开头的<Accordion>包裹组件，折叠状态管理会失效，引发点击后状态异常。
• 自定义类名样式冲突：accordion-header-with-icon类如果包含pointer-events: none或修改了点击事件默认行为的样式，会干扰Accordion的折叠逻辑，可暂时移除该类名测试是否恢复正常。
• 受控组件状态处理错误：若使用受控模式（通过activeKey和onChange控制折叠），但未正确更新状态，会导致点击后状态被立刻重置，出现Body显示后消失的情况，需检查状态更新逻辑是否正确。

内容的提问来源于stack exchange，提问作者Güven Yurtseven