reactjs - Callback when DOM is loaded in react.js

Question

Welcome To Ask or Share your Answers For Others

reactjs - Callback when DOM is loaded in react.js

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

reactjs - Callback when DOM is loaded in react.js

I want to have a callback invoked on my react.js component when it's DOM element (including all child nodes) is actually loaded on the page and ready. Specifically, I have two components that I want to render the same size, choosing the maximum of whichever component has the larger natural size.

It looks like componentDidMount is not really what I want because it is only called once per component, but I want my callback to be called again anytime the component is finished rendering. I thought I could add an onLoad event to the top level DOM element, but I guess that only applies for certain elements, like <body> and <img>.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:13:27+0000

Add onload listener in componentDidMount

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

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

 componentWillUnmount() { 
   window.removeEventListener('load', this.handleLoad)  
 }

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

Categories

reactjs - Callback when DOM is loaded in react.js

reactjs - Callback when DOM is loaded in react.js

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags