在react.js中加载DOM时的回调

reactjs React.js

番长Green

2020-03-19

当它的DOM元素（包括所有子节点）实际加载到页面上并准备就绪时，我想在我的react.js组件上调用一个回调。具体来说，我有两个要渲染相同大小的组件，选择具有自然尺寸的任何一个组件的最大值。

看起来componentDidMount并不是我真正想要的，因为每个组件仅被调用一次，但是我希望在组件完成渲染后再次调用我的回调。我以为可以将onLoad事件添加到顶级DOM元素中，但是我想这仅适用于某些元素，例如<body>和<img>。

第2247篇《在react.js中加载DOM时的回调》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
Gil番长Stafan 2020.03.19

我将componentDidUpdate应用于表以使所有列都具有相同的高度。它与jquery中的$（window）.load（）相同。

例如：

componentDidUpdate: function() {
        $(".tbl-tr").height($(".tbl-tr ").height());
    }
番长Green 2020.03.19

看起来像的组合componentDidMount，并componentDidUpdate会完成这项工作。当DOM可用时，第一个调用在初始渲染之后调用，一旦更新的DOM可用，则在任何后续渲染之后调用第二个调用。就我而言，我都让他们委托一个共同的职能来做同样的事情。

古一蛋蛋凯 2020.03.19

在现代浏览器中，它应该像 

try() {
     if (!$("#element").size()) {
       window.requestAnimationFrame(try);
     } else {
       // do your stuff
     }
};

componentDidMount(){
     this.try();
}
小宇宙阳光 2020.03.19

我发现在这简单的包装代码componentDidMount或componentDidUpdate使用setTimeout该浏览器的DOM已与阵营执行前的变化更新，0毫秒，确保时间setTimeout的功能。

像这样：

componentDidMount() {
    setTimeout(() => {
        $("myclass") //  $ is available here
    }, 0)
}

这会将匿名函数放在JS事件队列中，以在当前运行的React堆栈框架完成后立即运行。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android