React Hooks forwardRef useImperativeHandle TypeScript类型 最佳实践

定义

官网文档

forwardRef : 转发 ref
useImperativeHandle : 用于自定义暴露给父组件的实例值

版本

"react": "^17.0.2"
"@types/react": "^17.0.44"

代码

父组件

import { FC, useEffect, useRef } from 'react';

// 导入子组件
import ChildComponent, { IRefProps } from './ChildComponent';

let MyConponent: FC = function () {

	// 传入泛型,对 ref 进行类型约束
   let testRef = useRef(null);
   
   useEffect(()=>{
       console.log(testRef);    
       // 调用子组件的方法
       testRef.current?.MyTestFn()
   })
   
  return (
    <>
      
    
  );
};

export default MyConponent;

子组件

import