时间戳

首页 > 解决方案 > 将 React Ref 从父级传递给子级以获取 DOM 元素

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

问题描述

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

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

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

标签： javascriptreactjsdomflow

解决方案

不涉及任何 hack 的最佳解决方案是将一个函数从父级传递给子级，该函数返回要访问的元素的 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();
}

推荐阅读