React项目中Bootstrap Accordion组件样式异常、功能失效问题

两个核心问题导致样式和交互同时失效：

• JSX语法不识别原生class属性：你复制的原生Bootstrap示例全部使用HTML标准的class属性绑定样式类，但React的JSX语法要求类名必须通过className属性传递，写为class的属性会被React直接忽略，最终渲染出的DOM节点没有挂载任何Bootstrap样式类，样式自然完全偏离官方效果。
• 原生Bootstrap交互依赖的JS逻辑未生效：Bootstrap的折叠展开交互依赖自带的JS插件，该插件针对原生DOM设计，需要完整引入JS bundle才会扫描data-bs-*属性绑定事件；且React基于虚拟DOM渲染，直接照搬原生HTML的自定义属性在部分场景下会出现事件绑定失败的问题，即便类名修正，交互也可能异常。

二选一即可：

方案1：修正原生Bootstrap写法 #

适合不想额外引入组件库的场景：

1. 全局替换About.js中所有标签的class="xxx"写法为className="xxx"，确保React正确挂载样式类。
2. 完整安装并引入Bootstrap的CSS和JS资源：
   执行安装命令：

   npm install bootstrap
   

   在项目入口文件（通常为src/index.js）添加以下引入代码：

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

   改完后样式可恢复正常，折叠交互也可运行，注意如果项目开启了React严格模式，该方案可能偶现事件绑定重复/失效问题。

方案2：使用React官方适配库React-Bootstrap（推荐） #

这是Bootstrap官方维护的React适配组件库，完全适配React虚拟DOM机制，不需要手动处理类名、原生事件绑定问题，稳定性更高：

1. 执行安装命令：

   npm install react-bootstrap bootstrap
   

2. 在项目入口文件引入Bootstrap核心CSS：

   import 'bootstrap/dist/css/bootstrap.min.css'
   

3. 用封装好的Accordion组件替换原有原生代码，About.js修改后示例：

   import Accordion from 'react-bootstrap/Accordion';
   
   export default function About() {
     return (
       <Accordion defaultActiveKey="0">
         <Accordion.Item eventKey="0">
           <Accordion.Header>Accordion Item #1</Accordion.Header>
           <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.
           </Accordion.Body>
         </Accordion.Item>
         <Accordion.Item eventKey="1">
           <Accordion.Header>Accordion Item #2</Accordion.Header>
           <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.
           </Accordion.Body>
         </Accordion.Item>
         <Accordion.Item eventKey="2">
           <Accordion.Header>Accordion Item #3</Accordion.Header>
           <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.
           </Accordion.Body>
         </Accordion.Item>
       </Accordion>
     )
   }
   

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