如何在ReactJS中使用Bootstrap Popover

Question

我试图遵循引导文档以使工作成为弹出窗口。但是我一直没有成功地将这段代码转换成React可以理解的东西。

   {
  $(document).ready(function() {
    $('[data-toggle="popover"]').popover();
  });
}

没有它，我的弹出窗口将无法正常运行。有什么解决方案？

Answer 1

如果您在index.html中定义jquery，您也可以这样做。 从窗口对象调用jquery。

componentDidMount() {
    window.$('[data-toggle="popover"]').popover();
}

Answer 2

使用react-bootstrap库是有意义的，但是如果您仍然想要解决方案，请遵循此步骤...

您需要了解反应生命周期方法，而不是使用document.ready回调函数。

尝试将其添加到您的react组件

componentDidMount() {
    $('[data-toggle="popover"]').popover();
}

确保将jquery导入文件顶部

import $ from 'jquery'