React-Bootstrap是纯React重写的Bootstrap组件库，不依赖原生Bootstrap JS，仅复用其CSS样式；需安装react-bootstrap和bootstrap并显式引入CSS，禁用所有Bootstrap JS文件，组件须解构导入且属性名与原生不同。
React-Bootstrap 不是“集成到 Bootstrap 中”，而是完全替代 Bootstrap 的 JS 行为层，只复用其 CSS 类名和设计语义。你不需要、也不应该先装 Bootstrap 再“集成” React-Bootstrap —— 它们是互斥的选型路径。
npm install 时只装 react-bootstrap 和 bootstrap CSS
React-Bootstrap 本身不带样式，必须显式引入 Bootstrap 的 CSS 才能渲染正确。但 @popperjs/core、bootstrap/dist/js/bootstrap.min.js 这些原生 JS 文件**绝对不要装、不要 import**，否则会与 React-Bootstrap 的纯 React 实现冲突。
- 运行
npm install react-bootstrap bootstrap - 在
src/index.js或src/App.js顶部加import 'bootstrap/dist/css/bootstrap.min.css'; - 不要 import
bootstrap/dist/js/bootstrap.bundle.min.js—— React-Bootstrap 的Dropdown、Modal等组件内部已用 React 状态重写，不依赖 Popper 或 Bootstrap JS
组件导入和使用必须按命名导出方式
React-Bootstrap 组件不是全局变量，也不是通过 bootstrap.Modal 访问，所有组件都需显式解构导入。常见错误是直接写 <modal></modal> 却没 import，或误以为 Button 是 HTML 原生标签。
来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性
- 正确：
import { Button, Modal, ModalBody, Container, Row, Col } from 'react-bootstrap'; - 错误：只 import
react-bootstrap整包却没解构，或漏掉ModalBody等子组件导致样式断裂 - 注意属性名差异：
variant="primary"（不是class="btn btn-primary"），show={true}（不是data-bs-show）
别混用原生 Bootstrap HTML 结构和 React-Bootstrap 组件
比如你在同一页面里一边用 <div classname="dropdown"> + <code>data-bs-toggle，一边又用 <dropdown></dropdown>，会导致 DOM 行为不可控、事件重复触发、下拉定位错乱。
- 要么全走 React-Bootstrap 路线：所有交互组件都用
{...}导入的组件，状态由useState控制 - 要么全走原生 Bootstrap CSS 路线：只用
className，禁用所有 JS 插件，自己用useState实现显隐逻辑 - 混合使用时，
Dropdown会尝试接管同级.dropdown元素，而原生结构又可能被 Bootstrap JS 初始化，造成竞态
样式定制必须绕过 CSS-in-JS，走 Bootstrap CSS 变量或 Sass
React-Bootstrap 不提供内联主题 API，它的样式完全来自你引入的 bootstrap.min.css。想改按钮圆角、主色、字体大小？不能靠 props 配置，得动底层 CSS 源。
- 推荐方式：用 Sass 导入
@import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables';，覆盖$primary等变量后再@import '~bootstrap/scss/bootstrap'; - 快速调试可用 CSS 变量：
:root { --bs-primary: #2563eb; }，但注意部分组件（如Toast）未完全适配变量体系 - 避免用
styleprop 覆盖尺寸类（如style={{ width: '200px' }}），会破坏栅格响应行为
最易被忽略的一点：React-Bootstrap 的 Form.Control 默认不带 id，如果搭配 Form.Label htmlFor 使用，必须手动传 id，否则无障碍支持失效 —— 这种细节在文档里藏得深，但上线后会被读屏器直接暴露。
