react hook（2）useImperativeHandle

useImperativeHandle 可以结合ref将自定义的值，方法暴露给父组件，直接看代码

import React, {useImperativeHandle} from "react"

//定义props的接口，ref接口
interface ImProps {
    value: string;
}
interface ImRef {
    printValue: () => void;
}


const Imperative = React.forwardRef<ImRef,ImProps>((props:ImProps, ref)=>{

   //通过useImperativeHandle将自定义函数或者值挂载到ref上暴露给父组件
    useImperativeHandle(ref,()=>({
        printValue: ()=>{
             console.log(`test ${props.value}`);
        }
    }))
    return null;
})

export default Imperative;

useImperativeHandle的第一参数为ref，第二个参数为一个函数，这个函数返回暴露给父组件的ImRef类型的值，返回的对象里面的函数，值都会被挂载到ref上，比如printValue可以使用ref.current.printValue()进行调用

父组件部分代码

    interface ImRef {
       printValue: () => void;
    }

    //hook一个ref
    const imRef = useRef<ImRef>(null)
    
    //定义一个调用子组件方法的方法
    function print(){
        if(imRef.current){
            imRef.current.printValue();
        }
    }

   <Imperaative value="Imperative " ref={imRef}></Imperaative>
   <button onClick={print}>button</button>

此时我们点击按钮就会打印出 test Imperaative