React使用forward和useImperativeHandle实现父组件调用子组件

参考链接：React Hook 中useImperativeHandle介绍使用与场景 - 网页3剑客

子组件：

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

function SonTwoDemo(props, ref) {
    const sonFunc = () => {
        console.log('我是儿子中的方法')
    }

    // 作用: 减少父组件获取的DOM元素属性,只暴露给父组件需要用到的DOM方法
    // 参数1: 父组件传递的ref属性
    // 参数2: 返回一个对象,父组件通过ref.current调用对象中方法
    useImperativeHandle(ref, () => {
        return {sonFunc}
    })
    return (
        <>
            <p>子组件</p>
        </>
    );
}

export default forwardRef(SonTwoDemo);

父组件：

import React, {useRef} from 'react';
import SonTwoDemo from "./SonTwoDemo";

function FatherTwoDemo() {
    const headerRef = useRef(null);

    const getSonMethod = () => {
        headerRef.current.sonFunc();
    }

    return (
        <>
            <p>父组件2</p>
            <SonTwoDemo ref={headerRef}/>
            <button onClick={getSonMethod}>获取子组件的方法</button>
        </>
    );
}

export default FatherTwoDemo;