react-bootstrap 封装完整、API 更 React 化，内置状态管理；reactstrap 更轻量、CSS 零侵入，但需手动控制 isOpen 等状态，Modal 等组件不自动处理交互逻辑。
React 项目里别直接引入 Bootstrap CSS + jQuery，用 react-bootstrap 或 reactstrap 才是正解；前者封装更完整、API 更 React 化，后者更轻、CSS 零侵入但需手动处理部分交互逻辑。
react-bootstrap 和 reactstrap 的核心差异
两者都剥离了 jQuery，纯 React 实现，但设计哲学不同：
-
react-bootstrap把每个 Bootstrap 组件（比如Modal、Navbar）都封装成带完整状态管理的 React 组件，内部自动处理 show/hide、键盘焦点、Backdrop 点击关闭等逻辑 -
reactstrap更偏向“CSS 驱动”，组件本身不维护太多状态（例如Modal只控制结构渲染，开闭靠你传isOpenprop），样式完全复用 Bootstrap 5 的 CSS 文件，包体积更小（gzip 后约 15KB） - 如果你用的是 Bootstrap 5，默认主题色、断点、栅格系统在两个库中都可用，但
react-bootstrap对 v5 的支持更晚些（2025 年底才正式稳定支持），而reactstrap从 v9 起就原生适配 Bootstrap 5
npm install 时该选哪个命令
根据你当前项目的技术栈和维护预期来决定：
- 新项目、团队熟悉 React 惯例、需要快速交付且不纠结细节：运行
npm install react-bootstrap bootstrap，再在入口文件加import 'bootstrap/dist/css/bootstrap.min.css' - 已有 Bootstrap 5 CSS 基础、想最小化 JS 包体积、能接受手写部分状态逻辑：用
npm install reactstrap bootstrap，同样要导入 CSS，且注意reactstrap不自带图标，需额外引入@fortawesome/react-fontawesome或其他图标方案 - 别装
bootstrap+jquery+@popperjs/core手动桥接——React 的事件流和 jQuery 的 DOM 操作会打架，Modal点击 backdrop 不关闭、Dropdown失焦异常都是高频报错
常见错误：Modal 打不开 / 关不掉 / 背景变灰但内容不显示
这基本不是库的问题，而是状态同步或 CSS 加载顺序导致的：
- 确认
bootstrap.min.css在 React 渲染前已加载（放在index.html的<head>里，或确保 import 语句在React.StrictMode外层） -
react-bootstrap的Modal必须配合show和onHide使用，漏掉onHide就无法响应关闭动作；reactstrap则必须自己用useState控制isOpen，且不能只改 state 不触发 re-render - 如果用了 CSS-in-JS 库（如 Emotion），检查是否意外覆盖了
.modal的display或z-index；Bootstrap 5 默认z-index: 1055，低于这个值会被遮住
自定义主题和样式时的实际限制
两个库都支持覆盖，但路径不同：
-
react-bootstrap推荐用 CSS 变量（Bootstrap 5 原生支持）或通过className+ 外部 CSS 覆盖；它不推荐直接修改组件内部 class 名，因为版本升级可能变更结构 -
reactstrap因为几乎不封装样式，所以你可以自由用 Sass 变量重编译 Bootstrap CSS，或者用styled-components包一层；但要注意其组件 class 名与 Bootstrap 官方一致，容易和你自己写的类名冲突 - 两者的按钮、表单等基础组件都不带内置禁用态动画或 loading 状态——这些得你自己加
disabled+spinner组合，没“开箱即用”的loadingprop
真正麻烦的不是选哪个库，而是当设计稿要求「这个按钮圆角要 6px，不是 Bootstrap 默认的 4px，且 hover 阴影要加深」时，你得决定：是改全局 CSS 变量影响所有组件，还是给这个按钮单独加 className 写覆盖样式——后者容易失控，前者又可能破坏其他地方的一致性。这种权衡，库本身不替你做。
