将引用从div传递到同一渲染函数中的组件

Question

在下面的代码中，我试图将div的引用传递给Hello组件，但是我不确定该如何处理。当前，Hello正在接收null作为ref，这很有意义，因为尚未分配该ref。

我相信我可以使用componentDidMount和状态来更新Hello，但是有更好的方法吗？

class App extends React.Component {
  private myDiv: HTMLDivElement;
  render() {
    return <div>
      <div ref={(div) => this.myDiv = div}>Test</div>
      <Hello aDiv={this.myDiv} />  
    </div>;
  }
}

class Hello extends React.Component {
  componentDidMount() {
    console.log(this.props);
  }

  render() {
    return <div />;
  }
}

Codepen link

更新后的示例，其中使用状态并使用2个引用而不是1个引用。它可以工作，但是我希望我可以在Hello初始化期间访问ref，而不是在componentDidMount中。有办法吗？

class App extends React.Component {
  private myDiv1: HTMLDivElement;
  private myDiv2: HTMLDivElement;

  constructor(props) {
    super(props);

    this.state = {
      myDiv1: null,
      myDiv2: null,
    };
  }

  componentDidMount() {
    console.log('App:: componentDidMount');

    this.setState({
      myDiv1: this.myDiv1,
      myDiv2: this.myDiv2
    })
  }

  render() {
    console.log('App:: render');
    return <div>
      <div ref={(div) => this.myDiv1 = div}>div 1</div>
      <div ref={(div) => this.myDiv2 = div}>div 2</div>
      <Hello aDiv1={this.state.myDiv1} aDiv2={this.state.myDiv2} />  
    </div>;
  }
}

class Hello extends React.Component {
  componentDidMount() {
    console.log('Hello:: componentDidMount');
    console.log(this.props.aDiv1, this.props.aDiv2);
  }

  componentDidUpdate() {
    console.log('Hello:: componentDidUpdate');
    console.log(this.props.aDiv1, this.props.aDiv2);    
  }

  render() {
    return <div />;
  }
}

Codepen link