Передайте React Ref от родителя к потомку, чтобы получить элемент DOM

Question

У меня есть родительский и дочерний компоненты.Мне нужно получить доступ к родительскому компоненту HTMLelement в дочернем компоненте.

У меня есть работающее, но нечистое решение, включающее this.setState({ domNode: ReactDOM.findDOMNode(this) }); в родительском componentDidMount, что просто неверно на многих уровнях.

Как я могу сделать это, используя createRef() в родительском объекте, чтобы передать свою ссылку в качестве реквизита ребенку, а затем как мне получить узел DOM с типом HTMLElement из ссылки?

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