typescript antd 使用tag组件点击标签

在 TypeScript 中，使用 Ant Design (AntD) 的 Tag 组件时，你可以创建动态的标签页以便用户可以点击切换内容。Tag 是一种用于显示项目列表或分类信息的小部件。以下是基本步骤：

1. **安装依赖**：
首先确保已经在项目中安装了 AntD 和 TypeScript。如果没有，可以通过 npm 或 yarn 安装：

   npm install antd @types/antd
   # 或者
   yarn add antd tsdx @types/react @types/node

2. **引入组件**：
在需要使用 Tag 的文件里，导入 Tag 组件和其他相关的类型支持：

   import { Tag } from 'antd';

3. **创建 Tag 组件**：
创建一个函数或类组件，并处理点击事件。例如：

   const customTag = () => {
     const [tags, setTags] = React.useState<string[]>([]);

     const handleClick = (tag: string) => {
       // 根据业务逻辑更新状态，如添加、删除或切换标签
       const newTags = tags.filter((t) => t !== tag);
       setTags(newTags.includes(tag) ? newTags : [...newTags, tag]);
     };

     return (
       <div>
         {tags.map((tag, index) => (
           <Tag key={index} closable onClose={() => handleClick(tag)}>
             {tag}
           </Tag>
         ))}
         {/* 添加一个新的 Tag */}
         <Button type="primary" onClick={() => handleClick('新标签')}>
           新标签
         </Button>
       </div>
     );
   };

4. **使用组件**：
将 `customTag` 函数或组件实例放入应用程序的适当位置展示给用户。