React+TS前台项目实战（十一）-- 全局常用组件提示语可复制Link组件封装

---

前言

今天这篇讲的这个组件，是一个用于高亮显示文本并添加可选的跳转链接，提示文本，复制文本的 React 组件

---

HighLightLink组件

1. 功能分析

（1）通用的高亮Link代理组件，用于展示链接名称以及跳转地址处理
（2）根据是否提供tooltip属性，决定是否显示一个带有提示文本的Tooltip组件,提示文本可点击复制
（3）可复制组件单独抽离成一个灵巧组件，提供复制功能，具体代码查看上篇全局常用组件CopyText封装
（4）组件使用了 classNames 库来合并样式类名，并且使用了 styles 模块中的样式类名来设置弹框的样式

2. 代码+详细注释

// @/components/HighLightLink/index.tsx
import { FC } from "react";
import { Tooltip } from "antd"; // 引入antd的Tooltip组件
import Link from "../Link"; // 引入自定义的Link组件
import CopyText from "./CopyText"; // 引入自定义的CopyText组件
import { HighLightPanel } from "./styled"; // 引入自定义的HighLightPanel组件

// 定义Props的类型，用于表示组件的属性
type Props = {
  value: string; // 表示要高亮显示的文本
  to: string; // 表示要跳转的链接
  tooltip?: string; // 表示要显示的提示文本（可选）
  className?: string; // 表示要应用的样式类名（可选）
};

/**
 * HighLightLink组件，用于高亮显示文本并添加可选的跳转链接和提示文本
 * @param props - 组件的属性
 * @returns React元素
 */
export const HighLightLink: FC<Props> = (props) => {
  // 解构组件的属性
  const { value, to, tooltip, className } = props;

  return tooltip ? (
    // 如果存在提示文本，则显示Tooltip组件包裹的内容
    <Tooltip placement="top" title={<CopyText content={tooltip} />}>
      <HighLightPanel>
        {/* 使用Link组件包裹高亮显示的文本，并应用样式类名和跳转链接 */}
        <Link className={`${className} monospace`} to={to}>
          {value}
        </Link>
      </HighLightPanel>
    </Tooltip>
  ) : (
    // 否则直接显示高亮显示的文本
    <HighLightPanel>
      <Link className={`${className} monospace`} to={to}>
        {value}
      </Link>
    </HighLightPanel>
  );
};
------------------------------------------------------------------------------
// @/components/HighLightLink/index.module.scss
@import "@/styles/variables.module";

.highLightPanel {
  color: var(--cd-primary-color);
  font-size: 14px;
  @media (max-width: $mobileBreakPoint) {
    font-size: 12px;
  }
  a {
    color: var(--primary-color);
    margin-top: 2px;
    &:hover {
      color: var(--cd-primary-color);
    }
    @media (max-width: $mobileBreakPoint) {
      margin-top: 1px;
    }
  }
}
------------------------------------------------------------------------------
// @/components/CopyLightLink/styled.tsx
import classNames from 'classnames'
import { FC, HTMLAttributes } from 'react'
import styles from './index.module.scss'

export const HighLightPanel: FC<HTMLAttributes<HTMLDivElement>> = props => {
  const { children, className, ...rest } = props
  return (
    <div className={classNames(styles.highLightPanel, className)} {...rest}>
      {children}
    </div>
  )
}

3. 使用方式

// 引入组件
import HighLightLink from "@/pages/components/Text";
// 使用
<HighLightLink value="查看区块" to={`/block/123456`} tooltip="查看区块查看区块查看区块" />

4. 效果展示

---

总结

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