Ant Design 标签（Tag）组件实战：基本展示与可关闭标签的完整用法

Ant Design 标签Tag组件实战基本展示与可关闭标签的完整用法【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design标签Tag是 Ant Design 中用于“标记和分类”的轻量级展示组件适合为事物标注属性与维度、对内容进行归类。本文以官方基础示例为核心结合组件源码与样式实现讲解 Tag 的基本展示、closable可关闭交互、回调事件以及颜色配置的完整用法帮助你快速在项目中落地可复制、可运行的标签场景。一、基本用法最简单的标签展示在 ant-design 仓库的官方基础示例 components/tag/demo/basic.md 中给出了最核心的用法直接渲染若干Tag并为其中一个添加closable属性使其可关闭。import { Tag } from antd; function onClose(e) { console.log(e); } ReactDOM.render(div Tag标签一/Tag Tag标签二/Tag Tag closable onClose{onClose}标签三/Tag Taga hrefhttps://www.alipay.com/ target_blank标签四链接/a/Tag /div, mountNode);这段示例覆盖了三种典型形态纯文本标签直接写入子节点文本即可如“标签一”“标签二”可关闭标签添加closable属性后标签右侧会出现关闭图标内嵌链接标签标签内部可以放入a链接点击文字即可跳转且整块区域仍保持标签的外观与尺寸。说明示例代码使用ReactDOM.render(..., mountNode)的写法这与仓库 docs 目录下其他组件 demo 的运行方式一致在实际项目中通常采用ReactDOM.render(App /, document.getElementById(root))挂载。二、可关闭标签closable 与 onClose 回调closable是 Tag 组件最常用的属性之一。当其为true时组件会渲染一个关闭图标anticon-cross点击图标即可触发关闭流程。2.1 关闭流程的源码实现从 components/tag/index.jsx 的源码可以看到关闭的完整执行链路L17-L26close(e) { const dom ReactDOM.findDOMNode(this); dom.style.width ${dom.offsetWidth}px; // Its Magic Code, dont know why dom.style.width ${dom.offsetWidth}px; this.setState({ closing: true, }); this.props.onClose(e); }关键点解析关闭前先读取 DOM 的offsetWidth并写回width这是为了固定标签宽度保证随后的缩放关闭动画width 归零能平滑过渡设置closing: true使标签进入关闭动画状态立即调用this.props.onClose(e)将点击事件对象传递给外部回调代码中连续两次设置相同的 width 并注释为 Its Magic Code, dont know why属于仓库中保留的浏览器兼容处理可推断是为了强制触发浏览器重排reflow确保动画起始状态生效。onClose的默认实现为空函数L67因此即使不传该属性组件也不会报错AntTag.defaultProps { prefixCls: ant-tag, closable: false, onClose() {}, afterClose() {}, };从defaultProps可以确认closable默认值为false即默认标签不可关闭onClose与afterClose默认均为空函数。2.2 动画结束后的回调 afterClose关闭动画由rc-animate组件驱动L48-L52当动画结束时会触发animationEndanimationEnd(key, existed) { if (!existed !this.state.closed) { this.setState({ closed: true, closing: false, }); this.props.afterClose(); } }只有当动画确实结束existed为 false且尚未标记为 closed 时才会真正将标签从 DOM 中移除并调用afterClose。afterClose常用于删除后的收尾工作例如从数据数组中移除该标签。三、API 一览根据 components/tag/index.md 的 API 表格Tag 组件的全部公开参数如下参数说明类型可选值默认值closable标签是否可以关闭boolean—falseonClose关闭时的回调function—无afterClose动画关闭后的回调function—无color标签的色彩stringblue、green、yellow、red无其中closable决定是否渲染关闭按钮onClose在点击关闭按钮时立即触发动画前afterClose在关闭动画完全结束后触发DOM 移除后color决定标签的主题色。四、color 属性四种内置颜色的标签color属性接受blue、green、yellow、red四个内置值对应仓库 demo components/tag/demo/colorful.md 中的“各种类型”示例import { Tag } from antd; ReactDOM.render(div Tag closable colorblue蓝色/Tag Tag closable colorgreen绿色/Tag Tag closable coloryellow黄色/Tag Tag closable colorred红色/Tag /div, mountNode);颜色的实现位于组件渲染逻辑中L41-L46通过 classNames 动态拼接ant-tag-{color}前缀类const classString classNames({ [prefixCls]: true, [${prefixCls}-${color}]: !!color, [${prefixCls}-close]: this.state.closing, [className]: !!className, });对应的样式定义在 style/components/tag.lessL51-L78-blue { background: link-color; } -green { background: success-color; } -yellow{ background: warning-color; } -red { background: error-color; }可以推断四种颜色分别取自主题变量中的链接色link-color、成功色success-color、警告色warning-color与错误色error-color因此会随主题变量联动且带颜色的标签文字与关闭图标会统一显示为白色L54-L61 中color: #fff规则。五、实战组合数据驱动 动态增删标签官方 demo components/tag/demo/control.md 展示了“数据生成标签”的完整场景用数组渲染标签列表、点击关闭删除、点击按钮新增。官方提示删除时应使用afterClose而不是onClose这样标签先播放关闭动画再从数据源移除避免标签“瞬间消失”的突兀感。import { Tag, Button } from antd; let index 2; const App React.createClass({ getInitialState() { return { tags: [ { key: 1, name: 标签一 }, { key: 2, name: 标签二 }, ], }; }, handleClose(key) { const tags [...this.state.tags].filter(tag (tag.key ! key) tag); console.log(tags); this.setState({ tags }); }, addTag() { const tags [...this.state.tags]; index 1; tags.push({ key: index, name: 新标签${index} }); this.setState({ tags }); }, render() { return ( div {this.state.tags.map(tag Tag key{tag.key} closable afterClose{this.handleClose.bind(this, tag.key)}{tag.name}/Tag )} div Button onClick{this.addTag}添加标签/Button /div /div ); } }); ReactDOM.render(App /, mountNode);实现要点列表渲染tags数组中的每个对象包含唯一key与namemap渲染为Tag并以key作为 React 列表标识删除afterClose触发时调用handleClose(key)通过filter生成排除该 key 的新数组并setState新增维护全局计数器index点击“添加标签”按钮时追加{ key: index, name: 新标签${index} }到数组尾部。六、底层原理关闭动画与样式细节6.1 动画实现Tag 的进入与关闭动画基于rc-animate的Animate组件L48-L59Animate component showPropdata-show transitionName{${prefixCls}-zoom} transitionAppear onEnd{this.animationEnd.bind(this)} {this.state.closed ? null : ( div contenteditable="false">【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考