Javascript Can'；无法从其父组件获取子组件引用对象

我想将

和

组件从子组件引用到父组件。
所以我编写了如下代码：

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>
    )
  }
}

类父级扩展组件{
childRef=React.createRef（）
componentDidMount（）{
const childRef1=this.childRef.current.innerRef1
const childRef2=this.childRef.current.innerRef2
//…使用引用childRef1和childRef2进行计算
}
render（）{
返回(
)
}
}

在孩子的体内，我得到了一些类似的东西：

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>
    )
  }
}

class-ChildComponent扩展组件{
innerRef1=React.createRef（）
innerRef2=React.createRef（）
render（）{
返回(
)
}
}

我想得到这些标签的属性。例如getBoundingClientRect（）、scrollTop等；但是从父组件，因为我不能从ChildComponentComponentDidMount计算它，因为这些组件还没有渲染

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

---

正如您所看到的，

当前对象

向我显示了一个

null

值，但是在里面您可以看到我想要获得的所有属性。

因为您想要获得那些标记的属性，比如getBoundingClientRect（）。我提供了一个例子，在这个例子中，我使用ref调用了getBoundingClientRect（），并且在span的innerText中设置了一个字符串。请检查一下

父组件示例

import React from "react";
import ChildComponentExample from "./ChildComponentExample";

export default class ParentComponentExample extends React.Component {
    childRef = React.createRef();

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

        console.log(childRef2, 'childRef2');
        childRef2.current.innerText = 'This is SPAN';
        const rect = childRef1.current.getBoundingClientRect();
        console.log(rect, 'rect');
    }

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

import React from "react";

export default class ChildComponentExample extends React.Component {
    innerRef1 = React.createRef();
    innerRef2 = React.createRef();

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

从“React”导入React；
从“/ChildComponentExample”导入ChildComponentExample；
导出默认类ParentComponentExample扩展了React.Component{
childRef=React.createRef（）；
componentDidMount（）{
const childRef1=this.childRef.current.innerRef1；
const childRef2=this.childRef.current.innerRef2；
log（childRef2，'childRef2'）；
childRef2.current.innerText='这是SPAN'；
const rect=childRef1.current.getBoundingClientRect（）；
log（rect，'rect'）；
}
render（）{
返回(
)
}
}

子组件示例

import React from "react";
import ChildComponentExample from "./ChildComponentExample";

export default class ParentComponentExample extends React.Component {
    childRef = React.createRef();

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

        console.log(childRef2, 'childRef2');
        childRef2.current.innerText = 'This is SPAN';
        const rect = childRef1.current.getBoundingClientRect();
        console.log(rect, 'rect');
    }

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

import React from "react";

export default class ChildComponentExample extends React.Component {
    innerRef1 = React.createRef();
    innerRef2 = React.createRef();

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

从“React”导入React；
导出默认类ChildComponentExample扩展了React.Component{
innerRef1=React.createRef（）；
innerRef2=React.createRef（）；
render（）{
返回(
)
}
}