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

Question

我有一个默认呈现null 的React 类组件，以及调用activate() 函数之后的一些子组件。大致是这样的：

class MyComponent extends React.Component {

    ...

    activate() {

        this.setState({showComponent: true})

    }

    ...

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

我有一个外部 JavaScript 脚本，我在其中与 MyComponent 交互（调用激活函数）。

为了简短起见，我的问题是，在此外部 JS 脚本中调用 activate() 并尝试访问 <Child /> 组件中的 HTMLElements 之后（使用 document.getElementById）我得到空指针作为 <Child />组件稍后异步渲染。

有没有办法调整MyComponent 中的activate() 函数以“等待”<Child /> 中的所有子代挂载？

我已经尝试利用 setState 的异步特性并尝试使用 async activate() 和 await this.setState({showComponent: true}) 但这并没有改变渲染顺序。

所以简而言之，有没有办法在执行 setState 更新后等待子渲染。我想这有点特殊，因为它涉及条件渲染，MyComponent 最初什么也不渲染。

对任何想法都很满意！:)

Answer 1

如何在 componentDidMount 的 Child 组件内的窗口对象上发出自定义事件，并在外部 javascript 中侦听此事件并访问事件处理程序中的 HTML 元素。

Answer 2

我们可以将一个函数传递给子组件，我们可以在子组件的 componentDidMount 挂钩中调用该函数，因此当子组件被挂载时，它将触发该函数……但请记住，不要更新父组件的任何状态变量传递的函数，否则它将陷入循环（因为随着状态变量的变化，它将重新渲染所有子组件，最终组件确实 mount 也将被调用...）

---

    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 

已安装 }

}