如何在父类组件中获取子类组件的DOM ref

IT技术 reactjs ref
2021-05-23 08:33:49

我很难理解有关如何从父类组件访问子类组件的 DOM 引用的文档。

父.js：

import Child from './Child';

class Parent extends Component {
    constructor(props) {
        super(props);
        this.refOfTheParent = React.createRef();
    }

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

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

export default Parent;

Child.js：

class Child extends Component {

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

export default Child;

可能有人请完成此代码为我在哪里，childDOM在Parent::componentDidMount()具有的DOM REF <Child />。

奖励：如果 Parent 和 Child 都与 react-redux connect 连接，会是什么样子。

2个回答

您可以使用 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} />)

然后在父 

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

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

更多信息在这里

您可以在子组件中的 props 中传递 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} from 'react';
class Child extends Component {
    render() {
        return (
            <div ref={this.props.childRef} id="1">Child component</div>
        );
    }
}

export default Child;

演示

其它你可能感兴趣的问题
上一篇react切换类 下一篇如何从自定义（非 crud、自定义数据）json 显示自定义页面