React+TS前台项目实战(五)-- 全局常用组件Link封装+使用Omit定义类型

devtools/2025/3/15 3:27:04/

文章目录

  • 前言
  • Link组件
    • 1. 功能分析
    • 2. 代码+注释说明
    • 3. 使用方式
  • 总结


前言

接下来的几篇文章,将主要封装全局常用组件,以便于后续编写页面的简易和维护性的提高。本文将主要讲述跳转组件的封装。


Link组件

1. 功能分析

(1)国际化前缀自动补充,不用每次处理跳转都得写全路由,统一管理多语言功能,代码看起来也简洁很多,提高代码的可维护性
(2)定义组件的类型声明:使用Omit剔除原有类型属性ref,并使用 & 组合自己重新定义的ref和to属性声明
(3)ForwardedRef:接受一个泛型参数,定义函数组件的ref属性的类型,用于处理向下传递ref的类型
(4)国际化i18n文件详细代码看之前文章:国际化配置

2. 代码+注释说明

// @/components/Link/index.tsx
import { ForwardedRef, forwardRef, useMemo } from "react";
import { Link as RouterLink, LinkProps as RouterLinkProps, useParams, useLocation } from "react-router-dom";
import { addI18n, removeI18n } from "../../config/i18n";
type LinkProps = Omit<RouterLinkProps, "ref"> & {ref?: ForwardedRef<HTMLAnchorElement>;to?: string;
};const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {const { locale } = useParams<{ locale?: string }>(); // 获取当前语言const { pathname } = useLocation(); // 获取当前路径const { to: propsTo } = props; // 获取props中的toconst to = propsTo ?? removeI18n(pathname); // 跳转路径const getUrlWithPrefix = useMemo<RouterLinkProps["to"]>(() => {return addI18n(to, locale);}, [locale, to]); // 添加当前语言前缀return <RouterLink ref={ref} {...props} to={getUrlWithPrefix} />;
});export default Link;

3. 使用方式

// @/pages/home/index.jsx
// 引入组件
import Link from '@/components/Link/index.tsx'
// 使用
<Link to="/about" />

总结

下一篇讲【全局常用组件button封装】。关注本栏目,将实时更新。


http://www.ppmy.cn/devtools/48434.html

相关文章

go匿名函数

【1】Go支持匿名函数&#xff0c;如果我们某个函数只是希望使用一次&#xff0c;可以考虑使用匿名函数 【2】匿名函数使用方式&#xff1a; &#xff08;1&#xff09;在定义匿名函数时就直接调用&#xff0c;这种方式匿名函数只能调用一次&#xff08;用的多&#xff09; &am…

编程的m09:深入解读这一神秘指令的四大方面、五大细节、六大应用场景及七大挑战

编程的m09&#xff1a;深入解读这一神秘指令的四大方面、五大细节、六大应用场景及七大挑战 在编程的世界中&#xff0c;各种指令和代码如同魔法咒语&#xff0c;它们被赋予特定的含义和功能&#xff0c;用以操控计算机完成各种任务。然而&#xff0c;对于初学者或是不熟悉某个…

Eureka和Nacos有哪些区别?

Eureka和Nacos都能起到注册中心的作用&#xff0c;用法基本类似。但还是有一些区别的&#xff0c;例如&#xff1a; Nacos支持配置管理&#xff0c;而Eureka则不支持。 而且服务注册发现上也有区别&#xff0c;我们来做一个实验&#xff1a; 我们停止user-service服务&#x…

京准电钟|基于纳秒级的GPS北斗卫星授时服务器

京准电钟&#xff5c;基于纳秒级的GPS北斗卫星授时服务器 京准电钟&#xff5c;基于纳秒级的GPS北斗卫星授时服务器 你有没有思考过这样一个问题&#xff1a;火车站内&#xff0c;熙熙攘攘&#xff0c;旅客排队进站、列车停靠发车&#xff0c;一切井然有序。一旦有个别时间出现…

bash、zsh、fish三种流行Unix shell的区别

bash、zsh、fish三种流行Unix shell的区别 一、功能上的区别二、使用体验上的区别三、以下是每种 Shell 的常用命令行示例&#xff1a;BashZshFish 一、功能上的区别 bash&#xff1a;bash 是 Bourne Again SHell 的缩写&#xff0c;是 Linux 系统中默认的 Shell。bash 的特点是…

Vue全局组件

全局组件 首先说明一下&#xff0c;本人是前端小学生级别的菜鸡&#xff0c;吐槽的话请口下留情&#xff0c;在评论区指出错误或者补充不足&#xff0c;我会很喜欢&#xff0c;互喷不会进步&#xff0c;相互指点才会。。。。谢谢大家啦 目录 全局组件 目录内置模板引入模板优…

C++中的适配器模式

目录 适配器模式&#xff08;Adapter Pattern&#xff09; 实际应用 图形渲染库适配器 日志系统适配器 支付系统适配器 总结 适配器模式&#xff08;Adapter Pattern&#xff09; 适配器模式是一种结构型设计模式&#xff0c;它使得原本由于接口不兼容而不能一起工作的类…

格式化数字金额,每三位加逗号

前言 格式化金额&#xff0c;例如把数字 98765432 格式化为&#xff1a;&#xffe5;987,654.32。&#xffe5;符号可以换成别的&#xff0c;也可以去掉 const formatStatistic (text, precision 2, divPrecision true, icon &#xffe5;) > {//precision是保留小数位…