为什么我的 React 应用程序中没有呈现 Bootstrap Native 组件？答案

【问题标题】：Why aren't Bootstrap Native components rendering in my React app?为什么我的 React 应用程序中没有呈现 Bootstrap Native 组件？
【发布时间】：2020-04-06 18:16:16
【问题描述】：

试过

npm install --save bootstrap.native

在 create-react 应用程序的 index.js 文件中加载了 import 'bootstrap.native/dist/bootstrap-native-v4.js';。

预期结果： 将引导组件（导航栏、模式、警报、弹出...）转换为 jsx 并创建反应组件应该在引导 v4 中按预期工作。

问题： 直接粘贴在 index.html 中时有效，但尝试通过组件呈现时无效。

这表明引导本机已正确加载，但它似乎仅在引导代码在 DOM 中时才有效，而不是在“创建反应应用程序”呈现的代码上。

也欢迎任何关于使用引导组件作为反应组件而不使用 jquery 或任何反应引导库（本机实现）的建议。

【问题讨论】：

我建议你自己构建东西，bootstrap 使用了很多类来改变东西，例如我使用 bootstrap 类构建了这个模态，但是一个自定义的 react 组件codesandbox.io/s/hooks-modal-vs-class-modal-bdjf0。如果您想使用引导程序，我建议您将它与 jquery 一起使用，并将本文作为如何使用它的指南reactjs.org/docs/integrating-with-other-libraries.html
@jean182 - 糟糕的建议根本不起作用阅读我关于处理 DOM 与反应虚拟 DOM 的回答

标签： javascript reactjs twitter-bootstrap bootstrap-native

【解决方案1】：

我正在使用 BSN，但不与 react 一起使用：
原因 bootstrap.native 使用浏览器 DOM，这将对 React 的虚拟 DOM 造成严重破坏。简而言之：不要这样做！

更直接地说：
React 是一种完全不同的做事方式。 React 支持超出了 bootstrap.native 的范围。它需要一个完全独立的代码库。
使用react-bootstrap，它完全重写了 bootstrap.js（也没有 jQuery）
来自开发者：

React-Bootstrap 取代了 Bootstrap JavaScript。每个组件都有作为真正的 React 组件从头开始构建，不需要像 jQuery 这样的依赖项

【讨论】：