将React Ref从父级传递给子级以获取DOM元素

Question

我有一个父组件和一个子组件。我需要在子组件中访问父级的HTMLelement。

我有一个工作但不干净的解决方案涉及this.setState({ domNode: ReactDOM.findDOMNode(this) });在父母的componentDidMount，这在许多层面上是错误的。

我如何使用父级中的createRef()将其ref作为prop传递给子进程，然后如何从ref获取类型为HTMLElement的DOM节点？

Answer 1

不涉及任何hack的最佳解决方案是将一个函数从parent传递给child，返回要访问的元素的ref

家长：

constructor(props) {
    super(props);
    this.domElem = React.createRef();
}

getElem = () => {
    return this.domElem;
}

render() {
    return (
       <div>
           <div id="elem" ref={this.domElem}>Test Elem</div>
           <Child getParentElem={this.getElem}/>
       </div>
    )
}

儿童：

getParentRef = () => {
   const elem = this.props.getParentElem();
}