[前端-React] 在函数组件中使用ref实现子传父

父组件：

import React, { useRef } from "react";
import ChildComponent from "...";

export default function FatherComponent() {
    const childRef = useRef(null);

    const getValue = () => {
        // 调用子组件获取value的function
        const value = childRef.current.childGetValueFunction();
        console.log('value', value);
    }

    return (
        <>
            <ChildComponent ref={childRef}/>
            <button onClick={getValue}>获取子组件的value</button>
        </>
    );
}

子组件：

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

function ChildComponent(props, ref) {
    const getValueFunc = () => {
        // 获取value值
        const value = '123';
        return value;
    }

    useImperativeHandle(ref, () => ({
        childGetValueFunction: () => getValueFunc,
    }),[/*Dependency items*/]);

    return (
        <div>Child Component</div>
    )
}

export default forwardRef(ChildComponent);