为什么我的react-bootstrap Accordion在小尺寸设备上无法正常工作？

问题描述 #

我的react-bootstrap Accordion组件在小尺寸设备上无法正常工作，我在其中一个组件中实现了简单的Accordion组件，实现代码如下：

function CustomToggle({eventKey}) {
    const [children, setChildren] = useState('Mais filtros 🠗')
    const decoratedOnClick = useAccordionToggle(eventKey, () =>
        setChildren(children === 'Mais filtros 🠗' ? 'Menos filtros 🠕' : 'Mais filtros 🠗')
    )
  
    return (
        <div className="text-center">
            <div className="tag align-center" onClick={decoratedOnClick}>
                {children}
            </div>
        </div>
    )
}

...

<Accordion>
    <CustomToggle eventKey="0" />
    <Accordion.Collapse eventKey="0">
        <QueryForm
            baseEndpoint={this.props.baseEndpoint}
            tagsInitialValues={this.state.searchParams.tags}
            textInitialValue={this.state.searchParams.description}
            setSearchParams={this.setSearchParams}
        />
    </Accordion.Collapse>
</Accordion>

该组件在大尺寸断点下可完美运行，但在小尺寸设备上，展开后的QueryForm会反向展示，并且悬浮叠放在页面内容的顶部。

可通过配套代码沙盒复现上述问题：点击「Mais filtros」按钮触发展开手风琴，即可观察到导航栏折叠按钮出现时的问题断点场景。

请问我在实现过程中哪里出现了问题？

问题原因与修复方案 #

• 出现这个问题的核心原因是手风琴的组件结构不匹配react-bootstrap的设计规范：从v1版本开始，Accordion组件要求使用相同eventKey配对的触发按钮、展开面板，必须被同一个Accordion.Item组件包裹，形成独立的手风琴项单元。缺少Accordion.Item包裹层时，Collapse元素会丢失组件内置的文档流定位上下文，在小尺寸断点下遇到页面固定导航栏这类覆盖层元素时，会被应用错误的定位规则，最终出现脱离文档流悬浮、内容反向展示的异常表现。
• 修正方法：用Accordion.Item包裹配对的CustomToggle和Collapse元素，修正后的代码结构如下：

<Accordion>
  <Accordion.Item eventKey="0">
    <CustomToggle eventKey="0" />
    <Accordion.Collapse eventKey="0">
      <QueryForm
          baseEndpoint={this.props.baseEndpoint}
          tagsInitialValues={this.state.searchParams.tags}
          textInitialValue={this.state.searchParams.description}
          setSearchParams={this.setSearchParams}
      />
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion>

• 可以顺着两个方向补充排查：
  • 检查全局CSS样式是否在小尺寸断点下，给Collapse元素施加了position: absolute/position: fixed、flex-direction: column-reverse这类规则，覆盖了react-bootstrap的默认定位样式，导致元素脱离文档流、反向排列。
  • 核对当前使用的react-bootstrap版本，如果是v1及以上的高版本，不能直接沿用v0时代的Accordion写法，否则会出现样式定位的兼容异常。

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