文章目录
- 前言
- HighLightLink组件
- 1. 功能分析
- 2. 代码+详细注释
- 3. 使用方式
- 4. 效果展示
- 总结
前言
今天这篇讲的这个组件,是一个用于高亮显示文本并添加可选的跳转链接,提示文本,复制文本的 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 } = propsreturn (<div className={classNames(styles.highLightPanel, className)} {...rest}>{children}</div>)
}
3. 使用方式
// 引入组件
import HighLightLink from "@/pages/components/Text";
// 使用
<HighLightLink value="查看区块" to={`/block/123456`} tooltip="查看区块查看区块查看区块" />
4. 效果展示
总结
下一篇讲【全局常用组件Toast封装】。关注本栏目,将实时更新。