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

文章目录

  • 前言
  • 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封装】。关注本栏目,将实时更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29213.shtml

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

相关文章

【交易策略】#22-24 残差资金流强度因子

【交易策略】#22-24 残差资金流强度因子

路由控制和策略路由

文章目录 一、路由控制&#xff08;1&#xff09;、前言1.1.1-路由策略 &#xff08;2&#xff09;、正反掩码和通配符1.2.1-通配符 &#xff08;3&#xff09;、ACL1.3.1-ACL步长1.3.2-步长的作用1.3.3-TCP/UDP端口号 实验1:实验2: 二、前缀列表实验1:2.1.1-前缀列表的表达式2…

【图像分割】DSNet: A Novel Way to Use Atrous Convolutions in Semantic Segmentation

DSNet: A Novel Way to Use Atrous Convolutions in Semantic Segmentation 论文链接&#xff1a;http://arxiv.org/abs/2406.03702 代码链接&#xff1a;https://github.com/takaniwa/DSNet 一、摘要 重新审视了现代卷积神经网络&#xff08;CNNs&#xff09;中的atrous卷积…

找工作小项目:day16-重构核心库、使用智能指针(1)

day16-重构核心库、使用智能指针 今天是该项目开源在gthub的最后一天&#xff0c;我这里只是将我自己对于这个项目的理解进行总结&#xff0c;如有错误敬请包含指正&#xff0c;今天会整体理一遍代码&#xff0c;并使用智能指针管理整个项目。 1、common 头文件 定义宏用于…

/usr/bin/ld: 当搜索用于 /lib/i386-linux-gnu/libcuda.so 时跳过不兼容的 -lcuda

/usr/bin/ld: 当搜索用于 /lib/i386-linux-gnu/libcuda.so 时跳过不兼容的 -lcuda ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/023dbdeb215b4b4580f7f54706e32af9.pn当使用unsloth做微调时&#xff0c;发现找不到libcuda&#xff0c;很自然想到需要软链接到最新…

IDEA2023中使用run Dashboard面板?实现批量运行微服务

1、直接点击Add service--->Run Configuration Type---->Spring Boot 2、这样就出现了run Dashboard面板&#xff0c;可同时运行多个工程模块&#xff0c;shift选中所有启动类组命名&#xff08;Group Configurations&#xff09; 3、启动所有的项目

自行车在线租赁管理系统

摘 要 新时代是一个快速发展的时代&#xff0c;信息革命正在各个行业蔓延。互联网拉近了 人们的距离&#xff0c;物质生活水平的提高平静地改变了人类消费的观念。人们对自行车 租赁行业的要求越来越高&#xff0c;这对传统的自行车租赁行业来说既是挑战也是机遇。 有必要提高…

安卓多媒体(音频录播、传统摄制、增强摄制)

本章介绍App开发常用的一些多媒体处理技术&#xff0c;主要包括&#xff1a;如何录制和播放音频&#xff0c;如何使用传统相机拍照和录像&#xff0c;如何截取视频画面&#xff0c;如何使用增强相机拍照和录像。 音频录播 本节介绍Android对音频的录播操作&#xff0c;内容包…

【Linux】线程(二:线程控制)

本篇文章主要围绕线程控制来进行展开。 主题思路是以create与join两个接口展开。 目录 pthread_create 与 pthread_join:pthread_create:pthread_join: 代码&#xff1a;问题一&#xff1a;主线程与新线程谁先退出&#xff1f;问题二&#xff1a;哪个线程应该最后退出&#xf…

OpenCV读取和显示和保存图像

# 导入 OpenCV import cv2 as cv # 读取图像 image cv.imread(F:\\mytupian\\xihuduanqiao.jpg) # 创建窗口 #显示图像后&#xff0c;允许用户随意调整窗口大小 cv.namedWindow(image, cv.WINDOW_NORMAL) # 显示图像 cv.imshow(image, image)# 将图像保存到文件 success cv…

Centos部署openGauss6.0创新版本,丝滑的体验

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复&#xff0c; 安装迁移&#xff0c;性能优化、故障…

同三维T80004EHL-W-4K30 4K HDMI编码器,支持WEBRTC协议

输入&#xff1a;1路HDMI1路3.5音频&#xff0c;1路HDMI环出1路3.5音频解嵌输出 4K30超高清,支持U盘/移动硬盘/TF卡录制&#xff0c;支持WEBRTC协议&#xff0c;超低延时&#xff0c;支持3个点外网访问 1个主流1个副流输出&#xff0c;可定制选配POE供电模块&#xff0c;WEBR…

理解CA-IS3050G高速CAN收发器的CANH和CANL的电压

CA-IS3050G高速CAN收发器符合ISO 11898-2物理层标准。 1、CANH和CANL的电压之和为5V&#xff0c;下图是CA-IS3050G的高速CAN收发器参数&#xff0c;分析如下&#xff1a; 1&#xff09;、总线输出显性电压 2.75V < VCANH <4.5V&#xff0c;负载为60Ω&#xff0c;CANH…

Proxy和definedProperty

1. Proxy 代理 定义: 用于定义基本操作的自定义行为 Proxy修改的是程序默认形为&#xff0c;就形同于在编程语言层面上做修改&#xff0c;属于元编程 元编程 是指某类计算机程序的编写&#xff0c;这类计算机程序编写或者操纵其它程序&#xff08;或者自身&#xff09;作为它…

leetcode 1355 活动参与者(postgresql)

需求 表: Friends ---------------------- | Column Name | Type | ---------------------- | id | int | | name | varchar | | activity | varchar | ---------------------- id 是朋友的 id 和该表的主键 name 是朋友的名字 activity 是朋友参加的活动的名字 表: Activit…

QT实现多摄像头监控

工具使用方法&#xff1a; 1、在add camera后面输入对应摄像头的IP后&#xff0c;点击add会自动布局显示。 2、在del camera后选择一个对应IP后&#xff0c;点击del会自动删除对应摄像头的显示&#xff0c;且整体布局会自动调整。 工具使用场景&#xff1a; 测试摄像头的好坏。…

探索CSS clip-path: polygon():塑造元素的无限可能

在CSS的世界里&#xff0c;clip-path 属性赋予了开发者前所未有的能力&#xff0c;让他们能够以非传统的方式裁剪页面元素&#xff0c;创造出独特的视觉效果。其中&#xff0c;polygon() 函数尤其强大&#xff0c;它允许你使用多边形来定义裁剪区域的形状&#xff0c;从而实现各…

Redis常见数据类型及其常用命令详解

文章目录 一、Redis概述二、Redis常用命令1.通用命令1.1 KEYS&#xff1a;查看符合模板的所有 key1.2 DEL&#xff1a;删除一个指定的 key1.3 EXISTS&#xff1a;判断 key 是否存在1.4 EXPIRE&#xff1a;给一个 key 设置有效期&#xff0c;有效期到期时该 key 会被自动删除1.5…

【读博日记】拓扑结构(待修正)

Topology 拓扑学 内容来源于互联网&#xff0c;还在甄别中——20240617 拓扑结构指把实体抽象成与其形状大小无关的点&#xff0c;把连接实体的线路抽象成线&#xff0c;再研究这些电线之间的关系。 所谓相似的拓扑结构&#xff1a; 例如一个圆环变成正方形、长方形、三角形…

.Net OpenCVSharp生成灰度图和二值图

文章目录 前言一、灰度图二、二值图 前言 使用OpenCVSharp生成图片的灰度图和二值图 .Net 8.0版本&#xff0c;依赖OpenCvSharp4和OpenCvSharp4.runtime.win组件。 原图&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、灰度图 /// &…