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

以下是一个简化的CopyText组件示例，使用React和TypeScript实现：

import React, { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Button, Tooltip } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
 
interface CopyTextProps {
  text: string;
  tooltip?: string;
}
 
const CopyText: React.FC<CopyTextProps> = ({ text, tooltip = '复制成功' }) => {
  const [copied, setCopied] = useState(false);
 
  const onCopy = () => {
    setCopied(true);
  };
 
  return (
    <CopyToClipboard text={text} onCopy={onCopy}>
      <Tooltip title={copied ? tooltip : '点击复制'}>
        <Button icon={<CopyOutlined />} type="text" />
      </Tooltip>
    </CopyToClipboard>
  );
};
 
export default CopyText;

这个组件接收一个text属性，表示要复制的文本内容，以及一个可选的tooltip属性，表示复制成功后显示的提示文本。组件内部使用了Ant Design的Tooltip和Button组件，以及react-copy-to-clipboard库来实现点击复制文本的功能。