营销型企业网站案例分析,阿里云官方网,浙江省建设信息,网站建设主题forwardRef是一个可以将组件内的ref对外暴露的高阶组件#xff0c;当你的组件需要对外暴露元素的Ref#xff0c;或者想对外暴露某些内部方法#xff0c;就可以使用这个 #xff08;对应vue3的 expose 方法#xff09; 但是当forwardRef与TypeScript泛型组件结合时#xf… forwardRef是一个可以将组件内的ref对外暴露的高阶组件当你的组件需要对外暴露元素的Ref或者想对外暴露某些内部方法就可以使用这个 对应vue3的 expose 方法 但是当forwardRef与TypeScript泛型组件结合时会出现泛型丢失的问题 传入泛型无效 对这个问题网上有许多解决方法比如 定义 global.d.ts 等但是感觉都不够高效现在给大家带来我的解决方法 主要思路就是创建一个高阶组件继承原组件的泛型等类型同时返回出带有forwardRef 的新组件。
import { ForwardedRef, forwardRef } from react;
interface myRefT {/**用myRef来代替原本的ref */myRef?: ForwardedRefT;
}
/**创建使用forwardref的组件且保留原组件的泛型。 代价是传递ref得通过props - myRef* - 使用 forwardRef 包裹后泛型将丢失所以多包裹一层只是为了保留泛型。但是想传递ref就只能通过myRef传递不能直接使用ref属性 因为会报错ref不是props* param originalComponent 原组件需要两个参数第一个参数是props第二个参数是ref。* template T props的类型* template D ref的类型* returns 新组件可以正常使用泛型* example* 普通无泛型组件* const Xxx myForwardrefpropType,refType(function Xxx(props, ref){ ... }) //此时ref和组件props会自动获得泛型传递的类型** 有泛型的组件就比较麻烦不能直接传递myForwardref的泛型而是需要在函数里面自己传递类型* const Xxx myForwardref(function XxxT(props: propTypeT, ref: ForwardedRefrefType){ ... }) //其实就是ts类型的传递方式不同泛型组件的泛型需要写在里面才能获取到泛型。且注意需要给refType加上 ForwardedRefrefType** 需要暴露数据给外部就* useImperativeHandle(ref, () ({ xxxx })); //暴露出内部方法*/
const myForwardref function T, D(originalComponent: (props: T, ref: ForwardedRefD) JSX.Element) {const ForwardRefComponent forwardRef(originalComponent);ForwardRefComponent.displayName ForwardRefComponent;return function NewComponent(props: T myRefD) {return ForwardRefComponent {...(props as any)} ref{props.myRef} /;};
};
export default myForwardref; 缺点由于ref不能作为props传递 这个名字用了的话控制台会报错所以改为 “myRef”其余用法和普通Ref一模一样。
