在react.js中加載DOM時的回調

我想在我的react.js組件上調用callback時，它的DOM元素（包括所有子節點）實際上已加載到頁面上並準備就緒。具體而言，我有兩個要呈現相同大小的組件，選擇具有較大自然尺寸的組件的最大值。在react.js中加載DOM時的回調

它看起來像componentDidMount不是我真正想要的，因爲每個組件只調用一次，但我希望在組件完成呈現時再次調用回調。我想我可以添加一個onLoad事件到頂層DOM元素，但我想這隻適用於某些元素，如<body>和<img>。

來源

2014-09-26 brianmearns

看起來像組合componentDidMount和componentDidUpdate將完成工作。第一個是在初始渲染後調用，當DOM可用時，第二個在後續渲染後調用，一旦更新的DOM可用。就我而言，我都讓他們委託一個共同的功能來做同樣的事情。

來源

2014-09-26 12:50:23 brianmearns

我將componentDidUpdate應用於表以使所有列具有相同的高度。它與jquery中的$（window）.load（）相同。

如：

componentDidUpdate: function() { 
     $(".tbl-tr").height($(".tbl-tr ").height()); 
    }

來源

2016-03-31 23:34:04

不幸的是，'componentDidUpdate'不叫初始渲染，所以你的功能將不會被應用，直到道具或狀態是_changed_：https://reactjs.org/docs/react-comp onent.html＃componentdidupdate – brianmearns 2018-01-25 14:25:30

添加onload事件監聽器componentDidMount

class Comp1 extends React.Component { 
constructor(props) { 
    super(props); 
    this.handleLoad = this.handleLoad.bind(this); 
} 

componentDidMount() { 
    window.addEventListener('load', this.handleLoad); 
} 

handleLoad() { 
    $("myclass") // $ is available here 
} 
}

來源

2017-05-02 13:34:09 John

在現代瀏覽器，它應該像

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

componentDidMount(){ 
    this.try(); 
}

來源

2018-02-14 11:25:50 pihyper

heh，除了現代瀏覽器不使用jquery = P。儘管使用動畫框架是個不錯的提示，但假設它應該是實時更新。 – brianmearns 2018-02-14 20:29:16

在react.js中加載DOM時的回調

回答

相關問題