javascript - 如何在同一页面上使用（Bootstrap + jQuery）和 react-bootstrap？

Question

语境

我们有一个“遗留”应用程序，它依赖于以 jQuery 和 Symfony 作为后端的 Bootstrap 3。但是在我构建的最后一页上，我使用 React 作为页面内容。

因此，虽然“容器”（导航栏、标题等）是使用 Bootstrap 和 jQuery 制作的，但内容（用于考勤的“子应用”）是使用 React 制作的。

一切顺利。然后我注意到有一个“react-bootstrap”库，所以我用 react-bootstrap 组件替换了我的“div + bootstrap classes”。

问题

加载的第一个元素是可折叠面板。在那里你可以选择一些加载另一个面板的东西。您可能知道，react-bootstrap 不需要 jQuery，而是使用其内部 JS（太棒了！）。但是容器的 Bootstrap + jQuery 在它（容器）初始化并将 jQuery“事物”（我认为的事件侦听器和一些 HTML 属性）应用到我的 react-bootstrap 面板时会考虑该面板。

所以我最终得到了一个具有双重逻辑的面板，并且像折叠按钮这样的东西不再工作了，因为 React 关闭了面板，然后 jQuery 打开了它。

按下第一个按钮后加载的另一个面板运行良好，因为它是在 jQuery 应用其“事物”之后生成的。

可能的解决方案

1. 我们有一个“Pace”插件，它会在 Bootstrap 结束初始化时发出“done”事件。如果我在该事件发出后执行 ReactDom.render() ，一切正常（如预期的那样），但它会留下一个空页面，直到 jQuery 结束（至少 1 秒但很明显）。是的，我可以使用加载屏幕。容器已经有一个加载屏幕，一旦加载应用程序脚本就会消失，所以我不能再次使用它，因为它会再次出现，这不是好的用户体验（我不能让它不消失）。

2. 除了使用 Panel 组件，我可以使用经典的“div + bootstrap classes”来控制切换的 Panel 容器。问题是我必须对首先出现的每个 Bootstrap 组件执行此操作（不仅在此页面上，而且在其他所有页面上）。

也许是一个提示？

有没有办法阻止 jQuery 传播到我的 React 节点？考虑到这一点，我的应用程序仍然使用来自“容器”（引导程序基础、引导程序主题等）的 CSS？

标签： javascriptjqueryreactjstwitter-bootstrapreact-bootstrap