Question

我想在渲染的DOM上调用$(dom).popover()。所以我有：

module.exports = React.createClass({
    componentDidMount: function() {
        $(this.getDOMNode()).popover();
    },
    render: function() {
        return ( // My DOM );
    }
})

这会返回错误：TypeError: $(...).popover is not a function。但如果我在componentDidMount中加了延迟，那么它就可以了，即：

componentDidMount: function() {
    var _this = this;
    setTimeout(function () {
        $(_this.getDOMNode()).popover();
    }, 250);
}

如何在不使用setTimeout的情况下完成同样的事情？

Answer 1

尝试将jquery代码放在$（document）.ready（）。

中

E.G。：

componentDidMount: function() {
var _this = this;
$(document).ready(function() {
    $(_this.getDOMNode()).popover();
});
}

编辑＃1：回应评论：＆＃34;你还应该解释为什么＆＃34; - 罗希特古普塔

如果你问为什么太多，它将破坏这一切的奇迹。

我笑话。我遇到了答案，因为我遇到了与OP相同的问题。我正在使用jQuery重新初始化我的componentDidMount函数中的Materialize.css手风琴小部件（使用jQuery） - 或者至少我在尝试。但它并没有像我认为的那样工作。

然后我来到这里，看到OP尝试使用setTImeout，它有效;我尝试过这个;它对我有用 - 甚至在1ms - 然后我认为在文档（就绪）功能中拍打可能会起作用，因为它基本上类似于componentDidMount生命周期函数。 $（document）.ready在回调中运行任何内容之前侦听要加载的整个文档 - compondentDidMount在运行任何内容之前侦听要挂载的组件。

当你在componentDidMount函数中放入一个$（document）.ready函数（并将所有东西放入前者通常只在后者中）时，它会延迟componentDidMount函数中的代码，直到整个加载文档而不仅仅是componentDidMount函数所在的组件。弹出函数作用于尚未加载的页面的某个元素。使用OP的原始代码，您可以在页面加载后在控制台中手动调用popover事件，然后初始化效果，这意味着当调用componentDidMount时，弹出窗口所需的元素不存在，但在页面完全加载后确实存在 - 这就是为什么$（document）.ready工作：即触发其回调的时候。

这至少是我的理论:)为什么它有效的任何其他理论？

Answer 2

如果您在代码中定义了导入文字，请尝试删除。

// import * as $ from "jquery";

Answer 3

确保您已正确包含您的js文件，如下所示：

<html>
    <body>
        ...

        <script src="jquery.js"></script>
        <script src="bootstrap.js"></script>

        <!-- Your js file that starts React app -->
        <script src="myapp.js"></script>
    </body>
</html>

ReactJS componentDidMount在Bootstrap中的行为与预期不符

3 个答案: