解决 React forwardRef 与 TypeScript 泛型组件冲突的问题

本文主要是介绍解决 React forwardRef 与 TypeScript 泛型组件冲突的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        forwardRef是一个可以将组件内的ref对外暴露的高阶组件,当你的组件需要对外暴露元素的Ref,或者想对外暴露某些内部方法,就可以使用这个 (对应vue3的 expose 方法)

        但是当forwardRef与TypeScript泛型组件结合时,会出现泛型丢失的问题 (传入泛型无效)

        对这个问题,网上有许多解决方法,比如 定义 global.d.ts 等,但是感觉都不够高效,现在给大家带来我的解决方法

        主要思路就是创建一个高阶组件,继承原组件的泛型等类型,同时返回出带有forwardRef 的新组件。

import { ForwardedRef, forwardRef } from "react";
interface myRef<T> {/**用myRef来代替原本的ref  */myRef?: ForwardedRef<T>;
}
/**创建使用forwardref的组件,且保留原组件的泛型。 代价是传递ref,得通过props - myRef* - 使用 forwardRef 包裹后,泛型将丢失,所以多包裹一层,只是为了保留泛型。但是想传递ref就只能通过myRef传递,不能直接使用ref属性 ,因为会报错"ref不是props"* @param originalComponent 原组件,需要两个参数,第一个参数是props,第二个参数是ref。* @template T props的类型* @template D ref的类型* @returns 新组件,可以正常使用泛型* @example* 普通无泛型组件:* const Xxx = myForwardref<propType,refType>(function Xxx(props, ref){ ... }) //此时ref和组件props会自动获得泛型传递的类型** 有泛型的组件就比较麻烦,不能直接传递myForwardref的泛型,而是需要在函数里面自己传递类型:* const Xxx = myForwardref(function Xxx<T>(props: propType<T>, ref: ForwardedRef<refType>){ ... }) //其实就是ts类型的传递方式不同,泛型组件的泛型需要写在里面,才能获取到泛型。且注意需要给refType加上 ForwardedRef<refType>** 需要暴露数据给外部,就:* useImperativeHandle(ref, () => ({ xxxx })); //暴露出内部方法*/
const myForwardref = function <T, D>(originalComponent: (props: T, ref: ForwardedRef<D>) => JSX.Element) {const ForwardRefComponent = forwardRef(originalComponent);ForwardRefComponent.displayName = "ForwardRefComponent";return function NewComponent(props: T & myRef<D>) {return <ForwardRefComponent {...(props as any)} ref={props.myRef} />;};
};
export default myForwardref;

         缺点:由于ref不能作为props传递 (这个名字用了的话,控制台会报错),所以改为 “myRef”,其余用法和普通Ref一模一样。

这篇关于解决 React forwardRef 与 TypeScript 泛型组件冲突的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/343324

相关文章

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

Idea插件MybatisX失效的问题解决

《Idea插件MybatisX失效的问题解决》:本文主要介绍Idea插件MybatisX失效的问题解决,详细的介绍了4种问题的解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、重启idea或者卸载重装MyBATis插件(无需多言)二、检查.XML文件与.Java(该文件后缀Idea可能会隐藏

Nginx 访问 /root/下 403 Forbidden问题解决

《Nginx访问/root/下403Forbidden问题解决》在使用Nginx作为Web服务器时,可能会遇到403Forbidden错误,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录解决 Nginx 访问 /root/test/1.html 403 Forbidden 问题问题复现Ng

Python的pip在命令行无法使用问题的解决方法

《Python的pip在命令行无法使用问题的解决方法》PIP是通用的Python包管理工具,提供了对Python包的查找、下载、安装、卸载、更新等功能,安装诸如Pygame、Pymysql等Pyt... 目录前言一. pip是什么?二. 为什么无法使用?1. 当我们在命令行输入指令并回车时,一般主要是出现以

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f

Python解决雅努斯问题实例方案详解

《Python解决雅努斯问题实例方案详解》:本文主要介绍Python解决雅努斯问题实例方案,雅努斯问题是指AI生成的3D对象在不同视角下出现不一致性的问题,即从不同角度看物体时,物体的形状会出现不... 目录一、雅努斯简介二、雅努斯问题三、示例代码四、解决方案五、完整解决方案一、雅努斯简介雅努斯(Janu