forwardRef, useImperativeHandle实现父组件调用子组件方法（个人笔记，非教程）

追寻着星星的方向

于 2023-10-10 15:33:51 发布

阅读量308

点赞数

文章标签：笔记 javascript 前端

本文链接：https://blog.csdn.net/qq_44408123/article/details/133748258

版权

import React, { memo,  forwardRef,useRef, useImperativeHandle, type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from 'react'

interface Props{
    组件属性（不需要声明ref属性类型）
}

export interface ForwardRefProps{

    fn:()=> void
}

// 子组件
const Child:ForwardRefExoticComponent<PropsWithoutRef<Props> & RefAttributes<ForwardRefProps>> = memo(forwardRef<ForwardRefProps, Props>((props, ref) => {

     useImperativeHandle(ref, () => {
        return {
            fn() {
                console.log('fn')
                
            }
        }
    })

}

// 父组件
function Parent(){
    const ref = useRef<ForwardRefProps>()
    function test(){
        ref.current.fn()
    }

}