如何在React中使用原生Bootstrap accordion代码且不依赖React Bootstrap

问题根因 #

你仅在项目中引入了Bootstrap的CSS样式文件，未引入负责交互逻辑的Bootstrap JS脚本。Bootstrap的折叠、模态框等交互组件完全依赖自带的JS逻辑驱动，你代码中用到的data-bs-toggle、data-bs-target这类交互属性只有加载了JS脚本才会生效，因此会出现仅默认展开的第一个面板可见、点击其他面板无响应的情况。

解决方案1：引入Bootstrap JS脚本（无需修改现有组件代码） #

直接在项目入口文件（通常是index.js或App.js）中添加Bootstrap JS的引入即可，推荐引入bundle版本，已内置依赖的Popper.js，无需额外安装依赖：

import 'bootstrap/dist/js/bootstrap.bundle.min.js'

引入后刷新页面，原有手风琴代码的交互逻辑即可正常生效。

解决方案2：使用React原生状态控制（无需引入Bootstrap JS，更符合React开发规范） #

如果你不想引入额外的全局JS脚本，可以通过React的状态管理自己实现折叠展开逻辑，代码示例如下：

import React, { useState } from "react";

export default function About(){
  // 初始化三个面板的展开状态，默认第一个面板展开
  const [openStates, setOpenStates] = useState({
    one: true,
    two: false,
    three: false
  })

  // 切换面板展开状态的方法
  const togglePanel = (panelKey) => {
    setOpenStates(prev => ({
      ...prev,
      [panelKey]: !prev[panelKey]
    }))
  }

  return (
    <div className="container">
      <div className="accordion" id="accordionPanelsStayOpenExample">
        {/* 第一个面板 */}
        <div className="accordion-item">
          <h2 className="accordion-header" id="panelsStayOpen-headingOne">
            <button 
              className={`accordion-button ${!openStates.one ? 'collapsed' : ''}`} 
              type="button" 
              onClick={() => togglePanel('one')}
              aria-expanded={openStates.one} 
              aria-controls="panelsStayOpen-collapseOne"
            >
              Accordion Item #1
            </button>
          </h2>
          <div 
            id="panelsStayOpen-collapseOne" 
            className={`accordion-collapse collapse ${openStates.one ? 'show' : ''}`} 
            aria-labelledby="panelsStayOpen-headingOne"
          >
            <div className="accordion-body">
              <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
          </div>
        </div>

        {/* 第二个面板 */}
        <div className="accordion-item">
          <h2 className="accordion-header" id="panelsStayOpen-headingTwo">
            <button 
              className={`accordion-button ${!openStates.two ? 'collapsed' : ''}`} 
              type="button" 
              onClick={() => togglePanel('two')}
              aria-expanded={openStates.two} 
              aria-controls="panelsStayOpen-collapseTwo"
            >
              Accordion Item #2
            </button>
          </h2>
          <div 
            id="panelsStayOpen-collapseTwo" 
            className={`accordion-collapse collapse ${openStates.two ? 'show' : ''}`} 
            aria-labelledby="panelsStayOpen-headingTwo"
          >
            <div className="accordion-body">
              <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
          </div>
        </div>

        {/* 第三个面板 */}
        <div className="accordion-item">
          <h2 className="accordion-header" id="panelsStayOpen-headingThree">
            <button 
              className={`accordion-button ${!openStates.three ? 'collapsed' : ''}`} 
              type="button" 
              onClick={() => togglePanel('three')}
              aria-expanded={openStates.three} 
              aria-controls="panelsStayOpen-collapseThree"
            >
              Accordion Item #3
            </button>
          </h2>
          <div 
            id="panelsStayOpen-collapseThree" 
            className={`accordion-collapse collapse ${openStates.three ? 'show' : ''}`} 
            aria-labelledby="panelsStayOpen-headingThree"
          >
            <div className="accordion-body">
              <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
          </div>
        </div>
      </div>
    </div>  
  );
}

该方案完全基于React原生逻辑实现，没有全局JS依赖，后续自定义交互逻辑也更灵活。

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