使用引导程序反应弹出框不显示答案

【问题标题】：React popover with boostrap doesnt show使用引导程序反应弹出框不显示
【发布时间】：2017-07-06 14:23:29
【问题描述】：

您好，我需要使用 Bootstrap 中的弹出框功能（但正常的引导不是 React-Bootstrap），但不知何故它对我不起作用，我不知道为什么。

我就是这样使用它的。在我的渲染功能中，我有这个按钮

   <button id="mybutton" type="button" className="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Popover msg" data-html="true">Popover on bottom</button>

在我正确加载的 myscript.js 中，我有

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

但是当我点击按钮时它不起作用。我也这样尝试过

  $('#mybutton').popover();

没有成功。我拥有包括 Jquery、Boostrap.js 和 css 在内的所有内容，并且我已将 myscript.js 放在 index.html 的末尾，因此任何 js 文件都不能覆盖其功能。

你能告诉我我做错了什么吗？或者可能无法在 React 中使用 classis react popover？谢谢

【问题讨论】：

混合 React + 原生 JS 似乎不是一个好主意...您可能会破坏通常 React 应用程序的可预测状态并导致意想不到的效果（尤其是如果您使用 Flux / Redux）。为什么不使用 react-bootstrap.github.io/components.html#popovers (Bootstrap3) ？或者 reactstrap.github.io/components/popovers 如果你使用 Bootstrap4 ？

标签： jquery reactjs popover

【解决方案1】：

解决了这个问题。实际上我发现在文档就绪函数上使用$('[data-toggle="tooltip"]').tooltip();。还为时过早，因为我的组件仍未呈现。因此我把这个脚本放在componentDidMount() 上，现在它可以工作了。

【讨论】：