无法从其父React JS获取子组件引用对象

Question

我想从子级到父级引用<div>和<span>组件。所以我编码类似：

class Parent extends Component {
    childRef = React.createRef()

    componentDidMount(){
      const childRef1 = this.childRef.current.innerRef1
      const childRef2 = this.childRef.current.innerRef2

      //... compute with the references childRef1 and childRef2
  }

  render(){
    return(
      <ChildComponent ref={this.childRef} />
    )
  }
}

在孩子里面，我得到了类似的东西：

 class ChildComponent extends Component {
    innerRef1 = React.createRef()
    innerRef2 = React.createRef()


  render(){
    return(
      <div ref={this.innerRef1}>
         <span ref={this.innerRef2}></span>
      </div>
    )
  }
}

我想获取那些标签的属性。如getBoundingClientRect（），scrollTop等；但是从Parent组件开始，因为我无法从ChildComponent componentDidMount计算它，因为这些组件尚未渲染。

这是我从浏览器控制台获得的当前结果：

如您所见，current object向我显示了一个null值，但是在内部您可以看到我想要获取的所有属性。

Answer 1

[您想获取诸如getBoundingClientRect（）之类的标记的属性。我提供了使用ref调用getBoundingClientRect（）的示例，并且还将字符串设置为span的innerText。请检查。