我有一个父组件和一个子组件。我需要访问HTMLelement子组件中的父组件。
我有一个有效但不干净的解决方案，涉及this.setState({ domNode: ReactDOM.findDOMNode(this) });父母的解决方案，
componentDidMount这在很多层面上都是错误的。
我如何createRef()在父级中使用它来将其 ref 作为props传递给子级，然后如何HTMLElement从 ref 中获取具有类型的 DOM 节点？
将 React Ref 从父级传递给子级以获取 DOM 元素
IT技术
javascript
reactjs
dom
flow
2021-05-23 04:44:34
2个回答
不涉及任何 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();
}
值得一提的是@Shubham Khatri 的解决方案。我想展示的小更正，没有必要调用getElem()从子级到父级的回调函数来接收父级的引用。它可以直接将 ref 传递给 child<Child getParentElem={this.domElem}/>
我看到很少有用户抱怨{current: null}在 child收到。请检查组件 UI 是否由框架提供，例如 Semantic-UI。可能还有其他方法可以从组件中挂钩 ref。在语义 UI 中必须将父组件包装在<Ref innerRef={ ... }> ... </Ref>
其它你可能感兴趣的问题