react hook父组件调用子组件方法

主要使用到的hook：
forwardRef，useImperativeHandle
useRef

演示：

一、子组件中

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

// props子组件中需要接受ref
let Subcomponents = (props,ref) => {

const onCallback = () => {
	console.log('执行了')
}

    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
    useImperativeHandle(ref, () => ({
        // onCallback 就是暴露给父组件的方法
        onCallback
    }));
    return (
        <div>子组件</div>
    )
}
Subcomponents = forwardRef(ChildComp)

二、父组件中

import {useRef} from 'react';
const App= () => {
    const childRef = useRef();
    const updateChildState = () => {
        // onCallback就是子组件暴露给父组件的方法
        childRef.current.onCallback();
    }
    return (
        <>
            <Subcomponents ref={childRef} />
            <button onClick={updateChildState}>
            	触发子组件方法
            </button>
        </>
    )
}

过程：

1.父组件中调用 useRef() 创建了一个 React ref 并将其赋值给子组件 ref 变量。
2.我们通过指定 ref 为 JSX 属性，将其向下传递给 <Subcomponents ref={childRef}>。
3.React 传递 ref 给 forwardRef 内函数 (props, ref) => …，作为其第二个参数。
4.当 ref 挂载完成，ref.current 将指向 DOM 节点。

用forwardRef来承接得到父级传入的ref节点，并将其以参数的形式传给子节点
useImperativeHandle方法的的第一个参数是目标元素的ref引用

总结：

• 将通过forwarfRef传入的ref元素通过useImperativeHandle来进行绑定，指定该子组件对外暴露的方法或属性
  然后在useImperativeHandle中写代码即可，这样可以只暴露一部分方法属性，而不是整个底层的原生DOM节点