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中的to
  const 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封装】。关注本栏目，将实时更新。