React+TS前台项目实战(十)-- 全局常用组件CopyText封装


前言

今天这篇主要讲项目常用复制文本组件封装,这个组件是一个用于拷贝文本的 React 组件,它提供了拷贝,国际化和消息提示的功能


CopyText组件

1. 功能分析

(1)将 content 作为其内容,表示要拷贝的文本内容
(2)使用 useTranslation ,以便在组件中进行国际化
(3)使用 message.useMessage 函数,以便在组件中显示消息
(4)使用 navigator.clipboard.writeText 方法将 content 写入剪贴板
(5)组件使用了 classNames 库来合并样式类名,并且使用了 styles 模块中的样式类名来设置弹框的样式

2. 代码+详细注释

// @/components/CopyText/index.tsx
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { CopyText } from "./styled.tsx";
import { message } from "antd";
// 定义Props的类型,用于表示组件的属性
type Props = {
  content: string; // 表示拷贝的文本内容
  className?: string; // 表示要应用的样式类名(可选)
};
// 拷贝文本的组件:接受一个参数content,表示要拷贝的文本内容
export default (props: Props) => {
  // 解构组件的属性
  const { content, className } = props;
  // 使用useTranslation hook获取i18n的翻译函数
  const { t } = useTranslation();
  // 返回一个div元素,可以点击进行拷贝文本操作
  return (
    <CopyText
      className={classNames(className)}
      id={`copy__content__${content}`}
      onClick={(event) => {
        // 阻止事件冒泡和默认行为
        event.stopPropagation();
        event.preventDefault();
        // 使用剪贴板API将文本内容拷贝到剪贴板
        navigator.clipboard.writeText(content).then(() => {
          // 使用messageApi.open打开一个成功提示框, 使用i18n翻译成功提示语
          message.success(t("common.copied"));
        });
      }}
    >
      {content}
    </CopyText>
  );
};
------------------------------------------------------------------------------
// @/components/CopyText/styled.tsx
import styled from "styled-components";
export const CopyText = styled.div`
  cursor: pointer;
`;

3. 使用方式

// 引入组件
import CopyText from "@/pages/components/CopyText";
// 使用
<CopyText content="复制文本测试" />

4. 效果展示

在这里插入图片描述


总结

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

  • 16
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值