无法从他们的 parent React JS 中获取 Child 组件引用 object

Question

我想引用一个 <div> 和一个 <span> 组件，从 child 到 parent。
所以我编码如下：

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

在 child 里面，我有类似的东西：

 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() 的示例，并且我还将一个字符串设置为跨度的 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>
        )
    }
}

无法从他们的 parent React JS 中获取 Child 组件引用 object

Can't get Child Component ref object from their parent React JS

javascript

ecmascript-6

reactjs

react-component

react-ref