如何在同一页面上使用Bootstrap + jQuery和react-bootstrap?

问题描述

上下文

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

因此,尽管使用Bootstrap和jQuery制作“容器”(导航栏,标题等),但使用React制作内容(用于出勤的“子应用”)。

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

问题

首先加载的元素是可折叠面板。在这里,您可以选择一些加载另一个面板的内容。如您所知,react-bootstrap不需要jQuery,但使用其内部JS(太棒了!)。但是容器的Bootstrap + jQuery在初始化容器(容器)时会考虑该面板,并将jQuery“事物”(我认为是事件监听器和一些HTML属性)应用于我的react-bootstrap面板。

因此,我最终得到了一个具有双重逻辑的面板,并且诸如折叠按钮之类的功能不再正常工作,因为React关闭了面板,然后jQuery将其打开。

按下第一个按钮后加载的另一个面板效果很好,因为它是在jQuery应用其“事物”之后生成的。

可能的解决方

  1. 我们有一个“ Pace”插件,当Bootstrap结束其初始化时会发出“ done”事件。如果在发出该事件后执行ReactDom.render(),一切都会正常运行(按预期),但是它将留下一个页面,直到jQuery结束(不到1秒,但很明显)。是的,我可以使用加载屏幕。该容器已经具有一个加载屏幕,该加载屏幕会在加载应用脚本后立即消失,因此我无法再次使用它,因为它会再次出现,并且不是很好的UX(我无法使其不消失)。

  2. 我可以使用经典的“ div + bootstrap类”代替控制面板组件,而仅将其用于控制​​切换的面板容器。问题是我必须对首先出现的每个Bootstrap组件(不仅在此页面,而且在每个其他页面)执行此操作。

也许有提示吗?

有没有一种方法可以阻止jQuery传播到我的React节点?考虑到这一点,我的应用仍然使用“容器”中的CSS(引导程序基础,引导程序主题等)?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)