React 条件渲染：（a）等待孩子被挂载

Question

I have a React class component that renders null by default, and some children after an activate() function is called. Roughly like this:

class MyComponent extends React.Component {

    ...

    activate() {

        this.setState({showComponent: true})

    }

    ...

    render() {
        if (this.state.showComponent) {
            return <Child />
        } else {
            return null
        }
    
    }
}

I have an external JavaScript script in which I interact with the MyComponent (call activate function).

To keep it short, my problem is that after calling activate() in this external JS script and trying to access HTMLElements in the <Child /> component right after (with document.getElementById ) I get null pointers as the <Child /> component is rendered asynchronously a bit later.

Is there a way to adapt the activate() function in MyComponent to 'wait' for all children in <Child /> to be mounted?

I already tried to exploit the async nature of setState and tried async activate() with await this.setState({showComponent: true}) but this did not change the rendering order.

So in short, is there a way to wait for children to be rendered after you perform a setState update. I guess this is a bit of a special case as it involves conditional rendering and MyComponent initially renders nothing.

Happy about any ideas::)

Answer 1

How about emitting a custom event on window object inside componentDidMount of Child component and listening for this event in the external javascript and accessing the HTML element in the event handler.

Answer 2

we can pass a function to child component which we can call in child's componentDidMount hooks, so when the child gets mounted, it will trigger that function... but keep in mind don't update any state variable of parent component in that passed function otherwise it will stuck in a loop (coz as the state variable changes, it will re- render all the child component and eventually component did mount will also be called...)

---

    class MyComponent extends React.Component {

        ...

        activate() {

       this.setState({showComponent: true})

    }

        callback = ()=>{
       // function to be passed in child component 
      // don't update any state variable here .. 
        }

      ...

     render() {
      if (this.state.showComponent) {
        return <Child callback={this.callback} />
     } else {
         return null
     }

  }
}

---

  class child extends React.Component {
    constructor (props){
    super(props)
 }

   componentDidMount(){
     this.props.callback() // this will be called when this child will be 

mounted }

}