react hooks 父组件调用子组件实例，拿不到实例对象？

Question

父组件：

import React, { useRef } from "react";
import Children from "./children";

const Test: React.FC = () => {

    const children = useRef()
    
    return (
    <div>
        <Children ref={children}/>
        <button onClick={() => console.log(children)} > test </button>
    </div>)
}

export default Test

子组件:

import React, { useImperativeHandle } from "react";

const Children: React.FC<{ ref: any }> = ({ ref }) => {

    useImperativeHandle(ref, () => ({
        getVal: () => {
          return '返回数据';
        }
      }))
      
    return <div>Children</div>
}

export default Children

最终效果：

Answer 1

react中函数式组件没有实例，无法直接使用ref，所以要使用forwardRef:

import React, { useImperativeHandle,forwardRef } from "react";

const Children = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        getVal: () => {
            return '返回数据';
        }
    }))

    return <div>Children</div>
})

export default Children