React-hooks父组件通过ref获取子组件实例

在React中，可以使用useRef钩子来创建一个ref对象，并将其传递给子组件。父组件可以通过这个ref对象访问子组件的实例。

以下是一个简单的例子：

import React, { useRef, useEffect } from 'react';
 
// 子组件
function ChildComponent(props, ref) {
  useImperativeMethods(ref, () => ({
    getChildData: () => '子组件的数据'
  }));
  // ...
}
 
// 父组件
function ParentComponent() {
  const childRef = useRef();
 
  useEffect(() => {
    if (childRef.current) {
      // 使用ref访问子组件的方法
      const childData = childRef.current.getChildData();
      console.log(childData);
    }
  }, [childRef]);
 
  return (
    <div>
      <ChildComponent ref={childRef} />
    </div>
  );
}

在这个例子中，ChildComponent 是一个子组件，它使用了 useImperativeMethods 钩子（这里假设一个自定义的 useImperativeMethods 钩子，实际上应该是 useImperativeHandle）来暴露一个方法 getChildData。ParentComponent 是父组件，它创建了一个ref对象 childRef 并将其传递给子组件。在子组件渲染之后，父组件通过 childRef.current 访问子组件实例，并调用子组件暴露的方法。