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

文章目录

  • 前言
  • 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.mzph.cn/bicheng/25683.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java期末细节知识整理(三)

1.一个类是多个对象的共性体现 2.一个类可以有多个修饰符 3.类是将数据和方法封装在一起的一种数据结构 4.类和对象是面向对象程序设计方法中最核心的概念 5.在三目运算符flag&#xff1f;x1&#xff1a;x2中&#xff0c;如果x1和x2中有一个是浮点数&#xff0c;那么返回值…

Vue3父组件如何访问子组件属性和方法

本篇内容主要是父组件如何访问子组件的属性和方法 文章目录 子组件 //son.vue代码const list (info) >{console.log(info) }const name ref("XXXX")//子组件向父组件暴露了一个方法&#xff0c;然后父组件就可以去使用子组件里面的一些属性和方法了 //子组件向…

JAVA Mongodb 深入学习(二)索引的创建和优化

一、常用索引类型 1、单个索引 单个索引的创建 db.你的表名.createIndex({"你的字段名":1}) 单个索引的创建且是唯一索引 db.你的表名.createIndex({"你的字段名":1}),{ unique: true }) 2、复合索引 将多个过滤的字段&#xff0c;做成索引&#xff0c;…

centos使用docker快速安装nginx

1.使用yum install命令安装nginx,如果不是安装最新版&#xff0c;需指定需要安装的版本号 2.随便启动一个nginx 实例&#xff0c;只是为了复制出配置 docker run -p 80:80 --name nginx -d nginx:1.10 3.将容器内的配置文件拷贝到当前目录,别忘了后面的点&#xff1a; docker…

奇安信停服,国内还有什么可用的高防么?

这里写自定义目录标题 背景DDOS怎么办&#xff1f;方案推荐总结 背景 继前段时间百度云加速通知免费服务&#xff0c;6月底奇安信也将停止服务&#xff0c;到时候国内将几乎不存在免费好用的高防CDN了&#xff1b;类似的事情还有阿里云和腾讯云的一年期免费SSl证书也都停止供应…

数字孪生技术之三维建模

近年来&#xff0c;伴随着数字经济的发展&#xff0c;数字孪生技术已经成为推动各行业“数智化”转型的重要手段&#xff0c;并深度运用到工业、城市、基建等智慧化建设中。提到数字孪生&#xff0c;就一定离不开“三维建模”&#xff0c;今天我们就来聊聊三维建模是如何赋能数…

C++:SLT容器-->deque

C:SLT容器-->deque 1. 构造函数2. deque 赋值操作3. deque 大小操作4. deque 插入和删除5. deque 容器数据存取6. deque 排序操作 双端数组&#xff0c;可以对头部和尾部进行插入删除操作 需要导入头文件#include <deque> 1. 构造函数 deque deqT; // 默认构造函数 de…

vue-2 组件传值

组件关系分类 父子关系非父子关系 父子通信流程 父组件通过props将数据传递给子组件 给子组件以添加属性的方式传值子组件内部通过 props 接收模板中直接使用 props 接收的值 父组件 Parent.vue <template><div class"parent" style"border: 3px s…

CST Studio Suite 2020 软件安装教程、安装包下载

CST Studio Suite 2020 安装教程 安装包下载 复制链接在浏览器打开 https://www.qqres.com/3150.html CST Studio Suite 是由Dassault Systmes公司开发的一套电磁场仿真软件。它应用于电子、通信、天线设计、射频与微波、电磁兼容性 (EMC)、电磁干扰 (EMI) 等领域。 CST St…

Unity协程学习心得

前言 个人总结的一些Unity协程学习心得&#xff0c;如有不对请在评论区指出一起学习&#xff01;感谢。 在Unity编程中谈到异步逻辑&#xff0c;可以考虑使用协程来实现。协程&#xff08;Coroutine&#xff09;在Unity中的主要作用就是把一个任务暂停&#xff08;挂起&#…

智慧园区建设方案(Word)

1. 楼栋管理 2. 物业管理 3. 安防管理 4. 门禁管理 5. 停车管理 6. 能源管理 7. 环保管理 8. 园区生活服务 9. 招商管理 10. 收费中心 11. 园区地图 12. 门户网站 软件整套原件获取&#xff1a;本文末个人名片。

使用DPO微调大模型Qwen2详解

简介 基于人类反馈的强化学习 (Reinforcement Learning from Human Feedback&#xff0c;RLHF) 事实上已成为 GPT-4 或 Claude 等 LLM 训练的最后一步&#xff0c;它可以确保语言模型的输出符合人类在闲聊或安全性等方面的期望。但传统的RLHF比较复杂&#xff0c;且还需要奖励…

BabylonJS 6.0文档 Deep Dive 动画(四):通过动画排序制作卡通片

一种最为直接的方法是为每个动画剪辑&#xff08;Animatin Clip&#xff09;指定开始时间&#xff0c;最终形成一个卡通动画&#xff08;Cartoon&#xff09;。 1. 设计 1.1 概述 动画的脚本如下&#xff1a; 摄像机显示了一栋带门的建筑物。摄像机靠近门并停止。门打开&am…

掌控数据流:深入解析 Java Stream 编程

Java 8 引入了一种新的抽象称为流&#xff08;Stream&#xff09;&#xff0c;它可以让你以一种声明的方式处理数据。Java 8 Stream API 可以极大提高 Java 程序员的生产力&#xff0c;使代码更简洁&#xff0c;更易读&#xff0c;并利用多核架构进行外部迭代。这里将详细介绍 …

【NoSQL数据库】Redis简介

Redis Redis简介 Redis关系型数据库和非关系型数据库Redis 简介redis速度快的原因 Redis 配置Linux 源码安装redis命令工具 关系型数据库和非关系型数据库 关系型数据库&#xff08;Relational Database&#xff09;和非关系型数据库&#xff08;Non-Relational Database&…

重学Spring总结

1、Spring框架的诞生 文章目录 1、Spring框架的诞生1、BeanFactory 快速入门1.1、BeanFactory完成了loC思想的实现&#xff1a;1)导入Spring相关的依赖&#xff1a;2)定义Uservice接口及其UserviceImpl实现类&#xff1b;3)创建Bean的配置资源文件&#xff0c;文件名最好为&…

新材料正不断推动模具3D打印行业发展

随着工业4.0的浪潮席卷全球&#xff0c;模具制造行业也迎来了技术革新的新纪元。3D打印技术以其独特的制造优势&#xff0c;正逐渐在模具制造领域崭露头角。然而&#xff0c;要实现模具3D打印技术的广泛应用&#xff0c;高性能的打印材料是不可或缺的关键因素。 材料是模具3D打…

【Golang】Map 稳定有序遍历的实现与探索:保序遍历之道

【Golang】Map 稳定有序遍历的实现与探索&#xff1a;保序遍历之道 大家好 我是寸铁&#x1f44a; 总结了一篇【Golang】Map 稳定有序遍历的实现与探索&#xff1a;保序遍历之道✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言&#x1f34e; 在计算机科学中&#xff0c;数据结…

Kylin的基本介绍

一、定义与背景 Kylin是一款开源的分布式分析引擎&#xff0c;主要用于处理OLAP&#xff08;联机分析处理&#xff09;多维查询。它最初由eBay开发并贡献至开源社区&#xff0c;为Hadoop/Spark之上的数据提供SQL查询接口及多维分析&#xff08;OLAP&#xff09;能力&#xff0…

【内存管理】内存管理概述

文章目录 内存管理硬件结构早期内存的使用方法分段分页逻辑地址&#xff0c;线性地址&#xff08;intel架构&#xff09;虚拟地址物理地址结构图 虚拟地址到物理地址的转换内存管理总览系统调用vm_area_struct缺页中断伙伴系统slab分配器页面回收反向映射KSMhuge page页迁移内存…