从父级到子级传递React Ref以获得DOM元素

Question

我有一个父母和一个孩子组成部分。我需要访问HTMLelement子组件中的父组件。

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

我该如何createRef()在父母中使用它来将其ref作为道具传递给孩子，然后如何HTMLElement从ref中获取具有类型的DOM节点？

Answer 1

不涉及任何黑客的最佳解决方案是将函数从父级传递到子级，该函数返回要访问的元素的引用

上级：

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