ReactJS无法使用Ref回调获取类组件的Ref

Question

我正试图从父组件获取对子组件(class组件(的引用，我遇到了两个问题：

Parent component
private childRef: RefObject<any> = React.createRef();
<Child ref={this.childRef} />

1. ref回调不会触发，并且在我的引用中得到一个空的{current: null}。

2. React dev工具警告我从函数组件传递ref，但我的子组件是类组件。。

react_devtools_backend.js:2273 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

有人能帮忙吗？

仅供参考此问题发生在将我的应用程序从PReact迁移到React时。在Preact中，ref用于正确传递：

父

<Child ref={(ref: any) => {
if (ref && ref._component) {
this.childRef = ref._component._component
}
}}
</Child>

Answer 1

您必须转发参考

const Child = React.forwardRef((props, ref) => (
<div ref={ref} >
....
</div>
))

ref不会自动从函数组件传递到它的DOM元素。所以你必须手动传递。更多信息https://reactjs.org/docs/forwarding-refs.html

Answer 2

将其包装在div中。试试这个：

Parent component
private childRef: RefObject<any> = React.createRef();
<div ref={this.childRef} >
<Child />
<div>