Question

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

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

我该如何使用父级中的createRef()来将其引用作为道具传递给孩子，然后如何从引用中获取类型为HTMLElement的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();
}

Answer 2

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

中

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

2 个答案: