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

【问题标题】：Pass React Ref from parent to child in order to get DOM element将 React Ref 从父级传递给子级以获取 DOM 元素
【发布时间】：2019-03-01 08:44:46
【问题描述】：

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

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

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

【问题讨论】：

你试过这个吗：reactjs.org/docs/forwarding-refs.html？
我能知道你为什么要在子组件中访问父级的 HTML 元素，我的意思是你想达到什么目的？以便我提出更好的解决方案。
@PraveenRaoChavan.G 当然。我正在使用一个名为 AntDesign 的库。它的一个组件提供了一个 API，可以让我定义父级。特别是来自ant.design/components/select 的 getPopupContainer()

标签： javascript reactjs dom

【解决方案1】：

不涉及任何 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();
}

【讨论】：

我同意这一点，它看起来很干净。
所以一旦我的子组件中有一个引用，我就可以通过myRef.current 访问它。我如何从类似于findDOMNode() 方法的方法中获得element？
如果在 HTML 元素上指定了 ref，您将直接获取该元素，如果在 Component 上指定，则需要使用 findDOMNOde
由于某种原因，当我在子组件中执行this.props.getParentElem() 时，我得到{current: null}
@JamesPoulose 你在哪里运行的？您应该在 useEffect 或 componentdidmount 中执行此操作，以确保 ref 具有价值

【解决方案2】：

@Shubham Khatri 的解决方案值得一提。我想展示的小修正，不需要从子到父调用回调函数getElem() 来接收父的引用。可以直接将 ref 传递给子 <Child getParentElem={this.domElem}/> 我看到很少有用户抱怨在孩子身上收到{current: null}。请检查组件 UI 是否由框架提供，例如语义-UI。可能还有其他方法可以从组件中挂钩 ref。在 Semantic-UI 中必须将父组件包裹在 <Ref innerRef={ ... }> ... </Ref>

【讨论】：