Ant Design Tag 组件使用指南：颜色、关闭事件与动态标签一次讲清

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design

同一张内容列表里，既要区分「已审核 / 待处理」这样的状态，又要标出「来源：UGC」这类维度，堆文字没人看，堆颜色又乱。Ant Design 的 Tag 组件就是干这件事的：一行 JSX 套个小色块，状态和来源就分开了。本文面向刚接触 antd 的 React 前端，不逐条背 API，而是按你实际会遇到的场景走一遍——从最小示例、颜色取舍，到关闭事件和可点选标签，看完能直接在自己项目里落地，并且知道官方 demo 没覆盖的坑在哪。

30 秒最小可用示例

先跑起来，再看细节。下面这段代码演示最朴素的用法：两个纯展示标签，加一个带关闭按钮的标签：

import { Tag } from 'antd'; function App() { return ( <div> <Tag>标签一</Tag> <Tag>标签二</Tag> <Tag closable onClose={(e) => console.log('closed', e)}>标签三</Tag> </div> ); }

运行后看到三个小色块，第三个右上角多一个 ✕，点它会触发onClose并播放一次缩放退场动画。对应的官方示例在 components/tag/demo/basic.md，里面还演示了把<a>直接塞进 Tag 做「可点击标签」，需要跳转详情时可以照抄。

颜色与内容的取舍

Tag 的color属性控制背景色，但注意：当前版本的可选值只有blue、green、yellow、red四种（见 components/tag/index.md 的 API 表），不是任意色值。下面分三种常见取舍说。

四种预设色：状态用颜色，别用文字

适用场景：状态类标记（通过 / 警告 / 失败 / 处理中）。一行代码：

<Tag color="green">已通过</Tag> <Tag color="red">已驳回</Tag>

取舍建议：颜色承担「快速扫视」，文字承担「准确理解」，两者要一一对应且全项目统一。比如约定 green=通过、red=驳回，就永远别在别的页面拿 green 表示「进行中」。

标签内嵌链接：能点就点

适用场景：标签本身就是入口，比如从「来源：某某栏目」跳到栏目页。上面 basic 示例的第四个标签就是这种写法，Tag 会原样渲染子节点。取舍建议：只有当标签值得被点击时才加链接，一屏里超过一半的 Tag 都能点，说明该用别的组件（比如 Menu 或 List）了。

默认灰：宁缺毋滥

适用场景：信息密度高的列表，只有一两类维度需要强调。取舍建议：不加color的默认灰底 Tag 视觉重量最低，适合「来源」「分类」这类中性维度；四种预设色留给真正的状态，页面才不会被染成调色盘。

交互升级：关闭、点选与排序

用 afterClose 删除标签，别用 onClose

业务问题：用户从一组动态标签里删掉一个，删错了再找回来成本很高，所以删除要有动画缓冲。官方 demo 的注释写得很直接：使用afterClose而不是onClose，删除时才有动画效果。下面这段用数组生成一组可删标签（React 15+ 函数组件写法）：

import { Tag, Button } from 'antd'; function App() { const [tags, setTags] = React.useState(['标签一', '标签二']); const [n, setN] = React.useState(2); return ( <div> {tags.map((t) => ( <Tag key={t} closable afterClose={() => setTags(tags.filter((x) => x !== t))} > {t} </Tag> ))} <Button onClick={() => { setN(n + 1); setTags([...tags, `新标签${n + 1}`]); }}>添加</Button> </div> ); }

运行后点 ✕ 标签先播放缩放动画再消失，点「添加」随时补一个。关键区别：onClose在点击瞬间触发（适合打点、发请求），afterClose在动画结束后触发（适合从数组里移除元素），删标签用后者，否则元素先没了、动画还在原地空转。原始 demo 在 components/tag/demo/control.md，用的是类组件，写法照搬即可。

点选式过滤标签：自己拼一个

业务问题：筛选区要「点一下选中、再点一下取消」的多选标签。当前版本没有现成的 CheckableTag，但 Tag 会把restProps透传到底层节点，所以加个onClick和外层 className 就能拼出来：

function App() { const [sel, setSel] = React.useState([]); const all = ['React', 'Vue', 'Angular']; return ( <div> {all.map((t) => ( <Tag key={t} color={sel.includes(t) ? 'blue' : undefined} className={sel.includes(t) ? 'my-tag-checked' : ''} onClick={() => setSel(sel.includes(t) ? sel.filter((x) => x !== t) : [...sel, t])} > {t} </Tag> ))} </div> ); }

运行后点某个标签它会变蓝（选中），再点恢复默认灰（取消）。my-tag-checked里放阴影、加粗之类的强调样式即可，选中态用预设色 blue 表示最省事。

拖拽排序：不在 demo 里，但要加得动

业务问题：用户自定义的标签顺序需要自己调（比如「常用」排前面）。官方三个 demo 都没有拖拽，需要引入拖拽库（如 react-sortable-hoc）：把每个 Tag 包一层SortableElement，外层包SortableContainer，把style.cursor设为 move 就行。Tag 本身不关心顺序，排好序后把结果数组存下来即可。

三个容易踩的坑

现象：点 ✕ 标签瞬间消失，动画被跳过了。原因：在onClose里就把元素从数组移除，onClose触发时动画才刚开始，节点一消失动画自然没了。解法：移除逻辑放到afterClose里，onClose只做日志或请求。

现象：color="cyan"之类的写法不生效，标签还是默认灰底。原因：当前版本的可选值只有blue green yellow red四种（components/tag/index.md API 表第 23 行），其他值不会报错，只是回退默认样式。解法：需要更多颜色时，按源码 components/tag/index.jsx 第 41-46 行的规则自己补样式——每个颜色就是一个ant-tag-{color}的类名，在样式表里照葫芦画瓢加一条即可。

现象：一条超长标签把整行布局撑变形。原因：组件没有内置截断，children原样渲染。解法：在数据层控制文本长度（截断加省略号），全文太长就配 Tooltip 补全；标签的定位是「扫一眼就懂」，塞长文本本身就是用法错误。

写在最后

这个版本的 Tag 刻意做得很薄：四种预设色、可关闭、两个关闭时机回调，源码 components/tag/index.jsx 总共不到七十行，读一遍就能看懂动画是怎么接的。想扩展颜色、选中态甚至自定义触发器，都在这层薄薄的壳上加，成本很低；等以后升级到大版本，会多出图标、无边框等能力，迁移时对照新版 API 表逐条过一遍就行。

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design