javascript - ReactJS componentDidMount 与 Bootstrap 的行为不符合预期

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() 中。

例如:

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

编辑#1:回应评论:“你还应该解释原因”——Rohit Gupta

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

开个玩笑。我遇到了答案，因为我遇到了与 OP 相同的问题。我正在使用 jQuery 在我的 componentDidMount 函数中重新初始化 Materialize.css Accordion 小部件(使用 jQuery)——或者至少我正在尝试。但它并没有像我想象的那样工作。

然后我来到这里，看到 OP 尝试使用 setTImeout，并且成功了；我尝试过这个;它对我有用——即使是在 1 毫秒——然后我想到在文档(就绪)函数中拍打可能会起作用，因为基本上它做的事情类似于 componentDidMount 生命周期函数。 $(document).ready 在回调中运行任何内容之前监听整个文档加载——compondentDidMount 在运行任何内容之前监听要挂载的组件。

当你在 componentDidMount 函数中放置一个 $(document).ready 函数(并将所有通常只在后者中的东西放入前者​​)时，它会延迟 componentDidMount 函数中的代码，直到整个加载文档，而不仅仅是 componentDidMount 函数所在的组件。popover 函数作用于页面中尚未加载的某些元素。使用OP的原始代码可以在页面加载完成后在控制台手动调用popover事件，然后初始化效果，这意味着popover所需的元素在调用componentDidMount时不存在，但确实存在页面完全加载后——这就是 $(document).ready 起作用的原因:那是它的回调被触发的时候。

这至少是我的理论 :) 关于它为何起作用的任何替代理论？