React 中关于 useImperativeHandle 的 TypeScript 类型声明

作者：System 时间：2024年08月09日分类：所有,typescript 字数：650

这篇文章距离上次修改已过452天，其中的内容可能已经有所变动。




import React, { Ref, useImperativeHandle } from 'react';
 
interface MyComponentRef {
  focus: () => void;
}
 
interface MyComponentProps {
  // ...
}
 
const MyComponent: React.ForwardRefRenderFunction<MyComponentRef, MyComponentProps> = (
  props,
  ref
) => {
  useImperativeHandle(ref, () => ({
    focus: () => {
      // 实现聚焦逻辑
    }
  }));
 
  return (
    // ...
  );
};
 
export default React.forwardRef(MyComponent);

这段代码定义了一个MyComponent组件，它使用React.forwardRef来创建一个可以暴露引用（ref）的组件。MyComponentRef接口定义了组件暴露的方法focus，这样就可以通过传入的ref调用focus方法。useImperativeHandle确保了当ref被传递给组件时，focus方法能够被正确地暴露和调用。

React 中关于 useImperativeHandle 的 TypeScript 类型声明

评论已关闭

推荐阅读