將 React Ref 從父級傳遞給子級以獲取 DOM 元素

Question

我有一個父組件和一個子組件。 我需要在子組件中訪問父級的HTMLelement元素。

我有一個工作但不干凈的解決方案，涉及this.setState({ domNode: ReactDOM.findDOMNode(this) }); 在父級的componentDidMount ，這在很多層面上都是錯誤的。

我如何在父級中使用createRef()將其 ref 作為道具傳遞給子級，然后如何從 ref 中獲取HTMLElement類型的 DOM 節點？

Answer 1

不涉及任何 hack 的最佳解決方案是將函數從父級傳遞給子級，該函數返回要訪問的元素的引用

家長：

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

Answer 2

值得一提的是@Shubham Khatri 的解決方案。 我想展示的小更正，不需要從孩子到父母調用回調函數getElem()來接收父母的引用。 它可以直接將 ref 傳遞給 child <Child getParentElem={this.domElem}/>我看到很少有用戶抱怨在 child 接收{current: null} 。 請檢查組件 UI 是否由框架提供，例如 Semantic-UI。 可能還有其他方法可以從組件中掛鈎 ref。 在語義 UI 中必須將父組件包裹在<Ref innerRef={ ... }> ... </Ref>