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.rhkb.cn/news/352595.html

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

相关文章

CentOS搭建kubernetes集群详细过程(yum安装方式)

kubernetes集群搭建详细过程&#xff08;yum安装方式&#xff09; Kubernetes&#xff0c;也被称为K8s&#xff0c;是一个多功能的容器管理工具&#xff0c;它不仅能够协调和调度容器的部署&#xff0c;而且还能监控容器的健康状况并自动修复常见问题。这个平台是在谷歌十多年…

VS2022打开.netcore2.2 问题解决

1.vs2022运行时一直提示异常 2.解决方法&#xff0c;双击当前的项目修改xxxx.csproj文件 把当前的版本修改为2.2.0即可重新编译运行

事务所管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;客户管理&#xff0c;评论管理&#xff0c;基础数据管理&#xff0c;公告信息管理 客户账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;律师管理&#xff0…

Java多线程设计模式之不可变对象(Immutable Object)模式

简介 多线程共享变量的情况下&#xff0c;为了保证数据一致性&#xff0c;往往需要对这些变量的访问进行加锁。而锁本身又会带来一些问题和开销。Immutable Object模式使得我们可以在不加锁的情况下&#xff0c;既保证共享变量访问的线程安全&#xff0c;又能避免引入锁可能带…

Vue 3与ESLint、Prettier:构建规范化的前端开发环境

title: Vue 3与ESLint、Prettier&#xff1a;构建规范化的前端开发环境 date: 2024/6/11 updated: 2024/6/11 publisher: cmdragon excerpt: 这篇文章介绍了如何在Vue 3项目中配置ESLint和Prettier以统一代码风格&#xff0c;实现代码规范性与可读性的提升。通过设置规则、解…

QT——MySQL数据库联用

一、ODBC 1、ODBC简介 ODBC全称为Open Database Connectivity,是一种用于数据库操作的标准接口。要使用ODBC,首先需要安装相应的ODBC驱动程序,然后在系统中配置ODBC数据源。接着,可以通过编程语言(如C++、Java等)或者数据库工具(如SQL Server Management Studio)来连…

【离散化 二维差分】850. 矩形面积 II

本文涉及知识点 离散化 二维差分 LeetCode850. 矩形面积 II 给你一个轴对齐的二维数组 rectangles 。 对于 rectangle[i] [x1, y1, x2, y2]&#xff0c;其中&#xff08;x1&#xff0c;y1&#xff09;是矩形 i 左下角的坐标&#xff0c; (xi1, yi1) 是该矩形 左下角 的坐标…

第十七课,海龟画图习题课(一)

图案一&#xff0c;半圆 import turtleturtle.circle(50, 180)turtle.left(90)turtle.forward(100) 图案二&#xff0c;同心圆 import turtleturtle.circle(100)turtle.right(90)turtle.penup()turtle.forward(50)turtle.pendown()turtle.left(90)turtle.circle(150) 图案三&am…

上海亚商投顾:沪指缩量调整 PCB概念股持续爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 大小指数昨日走势分化&#xff0c;沪指全天震荡调整&#xff0c;创业板指午后涨超1%。消费电子板块全天强势&a…

持续学习的综述: 理论、方法与应用

摘要 为了应对现实世界的动态&#xff0c;智能系统需要在其整个生命周期中增量地获取、更新、积累和利用知识。这种能力被称为持续学习&#xff0c;为人工智能系统自适应发展提供了基础。从一般意义上讲&#xff0c;持续学习明显受到灾难性遗忘的限制&#xff0c;在这种情况下…

新手如何入门Web3?

一、什么是Web3&#xff1f; Web3是指下一代互联网&#xff0c;它基于区块链技术&#xff0c;致力于将各种在线活动变得更加安全、透明和去中心化。Web3是一个广义的概念&#xff0c;涵盖了包括数字货币、去中心化应用、智能合约等在内的多个方面。它的主要特点包括去中心化、…

深度学习 --- stanford cs231学习笔记四(神经网络的几大重要组成部分)

训练神经网络1 1&#xff0c;激活函数&#xff08;activation functions&#xff09; 激活函数是神经网络之于线性分类器的最大进步&#xff0c;最大贡献&#xff0c;即&#xff0c;引入了非线性。 1&#xff0c;1 Sigmoid sigmoid函数的性质&#xff1a; 结合指数函数的图像可…

element-plus的Tour 漫游式引导怎么去绑定Cascader 级联选择器

首先官方例子是用的button 官方.$el这个log出来是&#xff1a; 知道是以元素为准就拿对应的元素就行 级联选择器.$el是这样的&#xff1a; 你可以移入这个元素部分去看看是哪个要用的&#xff08;好像火狐直接放上去就可以看到元素表示&#xff0c;谷歌要双击或者右键选择去看…

[深度学习]--分类问题的排查错误的流程

原因复现&#xff1a; 原生的.pt 好使&#xff0c; 转化后的 CoreML不好使&#xff0c; 分类有问题。 yolov8 格式的支持情况 Format Argument Suffix CPU GPU 0 PyTorch - .pt True True 1 Tor…

C#——析构函数详情

析构函数 C# 中的析构函数&#xff08;也被称作“终结器”&#xff09;同样是类中的一个特殊成员函数&#xff0c;主要用于在垃圾回收器回收类实例时执行一些必要的清理操作。 析构函数: 当一个对象被释放的时候执行 C# 中的析构函数具有以下特点&#xff1a; * 析构函数只…

C语言 | Leetcode C语言题解之第162题寻找峰值

题目&#xff1a; 题解&#xff1a; int findPeakElement(int* nums, int numsSize) {int ls_max0;for(int i1;i<numsSize;i){if(nums[ls_max]>nums[i]);else{ls_maxi;}}return ls_max; }

Pycharm怎么默认终端连接远程服务器

因为经常需要从宿舍到学校内通勤&#xff0c;期间所有连接都会中断&#xff0c;所以每次开SSH特别麻烦&#xff0c;每次终端自动切换到本地&#xff1a; 每次都得点一下Start SSH Session 想要默认终端连接远程服务器&#xff0c;需要点File->Setting->Tools->SSH T…

无代码爬虫软件八爪鱼采集器-如何设计判断是、否

我们在设计采集规则的时候&#xff0c;可能会需要判断&#xff0c;比如采集评论的时候“展开更多回复”&#xff0c;就点击这个按钮&#xff0c;像这种情况就可以设计一个判断模块进入 判断模块添加后会自动生成两个&#xff0c;默认都是不判断直接执行&#xff0c;如果我们需要…

ROS实验课(三)

write in advance 此次实验课给我的生活来了沉重的一击&#xff0c;不单单是因为没有做出来&#xff0c;还因为我卡在了 插件 缺失 而无法解决。之前对待实验课&#xff0c;能在操作流程之外有暇思考具体的实现&#xff0c;此次只能记录简单的操作流程部分。 老规矩&#xff…

保姆级pycharm远程连接linux服务器

1、登录服务器&#xff0c;创建账号。 一般都是管理员账户登录&#xff0c;创建自己的账号。如果不需要&#xff0c;可跳过这步。 打开MobaXterm&#xff0c;点击左上角Session创建会话。 再点击左上角SSH&#xff0c;分别输入服务器ip和账号&#xff0c;最后点ok&#xff0c;进…