Reactjs 如何在父类组件中获取子类组件的DOM引用

我很难理解如何从父类组件访问子类组件的DOM ref

Parent.js：

从“/Child”导入子项；
类父级扩展组件{
建造师（道具）{
超级（道具）；
this.refOfTheParent=React.createRef（）；
}
componentDidMount（）{
const parentDOM=this.refOfTheParent.current；
//常数childDOM=？？？；
}
render（）{
返回(
);
}
}
导出默认父对象；

Child.js：

类子级扩展组件{
render（）{
返回(
子组件
);
}
}
导出默认子对象；

有人能帮我完成这段代码吗？

Parent:：componentDidMount（）

中的

childDOM

的DOM引用是

---

额外好处：如果父级和子级都使用react-redux connect连接，情况会如何。

您可以使用

forwardRef

class Child extend React.Component{
   render() {
      return (
        <div ref={this.props.forwardRef}> Child component </div>
      )
   }
}

export default React.forwardRef((props, ref) => <Child {...props} forwardRef={ref} />)

类子扩展React.Component{
render（）{
返回(
子组件
)
}
}
导出默认的React.forwardRef（（props，ref）=>）

然后是父母

constructor(props) {
  // ...
  this.childRef = React.createRef();
}

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

构造函数（道具）{
// ...
this.childRef=React.createRef（）；
}
render（）{
返回(
)
}

---

更多信息

您可以使用

forwardRef

class Child extend React.Component{
   render() {
      return (
        <div ref={this.props.forwardRef}> Child component </div>
      )
   }
}

export default React.forwardRef((props, ref) => <Child {...props} forwardRef={ref} />)

类子扩展React.Component{
render（）{
返回(
子组件
)
}
}
导出默认的React.forwardRef（（props，ref）=>）

然后是父母

constructor(props) {
  // ...
  this.childRef = React.createRef();
}

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

构造函数（道具）{
// ...
this.childRef=React.createRef（）；
}
render（）{
返回(
)
}

---

更多信息

您可以在子组件中传递道具中的ref，如

import React,{Component} from 'react';
import Child from './Child';
class Parent extends Component {
    constructor(props) {
        super(props);
        this.refOfTheParent = React.createRef();
        this.childRef=React.createRef();
    }

    componentDidMount() {
        const parentDOM = this.refOfTheParent.current;
         const childDom=this.childRef.current;
         console.log(childDom);
        //const childDOM = ???;
    }

    render() {
        return (
            <div ref={this.refOfTheParent}>
                <Child childRef={this.childRef}/>
            </div>
        );
    }
}
export default Parent

import React，{Component}来自'React'；
从“./Child”导入子项；
类父级扩展组件{
建造师（道具）{
超级（道具）；
this.refOfTheParent=React.createRef（）；
this.childRef=React.createRef（）；
}
componentDidMount（）{
const parentDOM=this.refOfTheParent.current；
const childDom=this.childRef.current；
console.log（childDom）；
//常数childDOM=？？？；
}
render（）{
返回(
);
}
}
导出默认父级

子组件

import React,{Component} from 'react';
class Child extends Component {
    render() {
        return (
            <div ref={this.props.childRef} id="1">Child component</div>
        );
    }
}

export default Child;

import React，{Component}来自'React'；
类子扩展组件{
render（）{
返回(
子组件
);
}
}
导出默认子对象；

---

您可以在子组件中传递道具中的ref，如

import React,{Component} from 'react';
import Child from './Child';
class Parent extends Component {
    constructor(props) {
        super(props);
        this.refOfTheParent = React.createRef();
        this.childRef=React.createRef();
    }

    componentDidMount() {
        const parentDOM = this.refOfTheParent.current;
         const childDom=this.childRef.current;
         console.log(childDom);
        //const childDOM = ???;
    }

    render() {
        return (
            <div ref={this.refOfTheParent}>
                <Child childRef={this.childRef}/>
            </div>
        );
    }
}
export default Parent

import React，{Component}来自'React'；
从“./Child”导入子项；
类父级扩展组件{
建造师（道具）{
超级（道具）；
this.refOfTheParent=React.createRef（）；
this.childRef=React.createRef（）；
}
componentDidMount（）{
const parentDOM=this.refOfTheParent.current；
const childDom=this.childRef.current；
console.log（childDom）；
//常数childDOM=？？？；
}
render（）{
返回(
);
}
}
导出默认父级

子组件

import React,{Component} from 'react';
class Child extends Component {
    render() {
        return (
            <div ref={this.props.childRef} id="1">Child component</div>
        );
    }
}

export default Child;

import React，{Component}来自'React'；
类子扩展组件{
render（）{
返回(
子组件
);
}
}
导出默认子对象；

---

您想访问div，或者想从父级渲染一些值，为什么我会这样问，因为不使用Refs，您应该使用State，而不建议使用Refs。我希望div在子级中。和父母身份一样，但对孩子来说。这是为了什么？可能是XY问题，需要以另一种方式解决。您想访问div，或者想从父级呈现一些值。为什么我这样问是因为您不应该使用Refs，而应该使用State，不建议使用Refs。我希望div位于子级。和父母身份一样，但对孩子来说。这是为了什么？可能是XY问题，需要用另一种方法解决。你能用forwardRef更新我的Child.js代码吗？我是stupid@horgen没有看到你在谈论类：）你能用forwardRef更新我的Child.js代码吗？我是stupid@horgen没有看到您正在谈论的类：）尚未尝试此操作，但这不会返回类节点而不是没有forwardRef的Child的DOM节点吗？我没有得到you@horgen这是一个好问题，如果你知道答案，请告诉我。如果确实像您期望的那样工作，那么下一个问题是为什么我们需要

forwardRef

：）让我知道我们还没有尝试过这个，但是它不会返回类节点而不是没有forwardRef的Child的DOM节点吗？我没有得到you@horgen这是一个好问题，如果你知道答案，请告诉我。如果它的工作方式与您期望的一样，那么下一个问题是为什么我们需要

forwardRef

：）请告诉我