使用 useRef来实现 父组件调用子组件的方法

优点： 1、写法简单易懂 2、假如子组件嵌套了HOC，也可以指向真实子组件
缺点： 1、需要自定义props属性 2、需要自定义暴露的方法

//这个为子组件
import {useState, useImperativeHandle} from 'react'
export default function Child({cRef})  {
    useImperativeHandle(cRef,() => ({
        //aa即为子组件暴露给父组件的方法
        aa : () => {
            console.log('aa');
        }
    }))
    return (
        <div>子组件</div>
    )
}

import {useRef} from 'react'
//记得将子组件引入到父组件中去
import Child from './child'

export default function Father() {
    const childRef = useRef()
    const childFunction = () => {
        //fn就是子组件暴露给父组件的方法
        childRef.current.fn()
    }
    return (
        <div>
            {/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef}  */}
            <Child cRef={childRef}/>
            <button onClick={childFunction}>触发子组件的方法</button>
        </div>
    )

}