Ant Design 0.x 升级指南:从 0.9 到 0.12 的不兼容变更与迁移实践

发布时间:2026/9/18 4:01:19

Ant Design 0.x 升级指南:从 0.9 到 0.12 的不兼容变更与迁移实践 Ant Design 0.x 升级指南从 0.9 到 0.12 的不兼容变更与迁移实践【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design本文基于 ant-designantd 0.12.x仓库中的升级指南展开系统梳理了 0.9 → 0.10 → 0.11 → 0.12 四个升级过程中的不兼容变更样式加载方式调整、Table 远程模式移除、DatePicker 受控化、Progressformat签名变更、Tree 回调参数重构等。读完本文你可以对照仓库源码逐项确认每项变更的落地实现完成低版本 antd 项目向 0.12 的平滑升级。本指南着重列出升级中的不兼容变化和推荐改动所有变动可参见 Changelog。当前仓库版本为 0.12.17见 package.json以下各节按升级路径从高到低排列。0.11 0.12使用 Form 提供的校验功能代替 ValidationValidation组件已被废弃并会在以后的版本完全移除建议尽快使用Form自带的校验功能替换Validation。这一废弃状态在源码中有直接体现——components/validation/index.jsx 的render方法在每次渲染时都会通过warning输出提示warning(false, Validation is deprecated, please use Form which has supported validation after antd0.12.0.);该组件本质上只是对rc-form-validation的薄封装暴露validate、reset、forceValidate三个方法以及Validator、FieldMixin静态成员。迁移后这些能力都由Form接管典型用法可参考仓库内的三个演示基础表单校验其他校验场景自定义校验规则以 validate-basic 为例迁移后的核心写法是通过Form.create注入表单实例并用getFieldProps将字段与校验规则绑定import { Button, Form, Input } from antd; const createForm Form.create; const FormItem Form.Item; class BasicDemo extends React.Component { handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((errors, values) { if (!!errors) { console.log(Errors in form!!!); return; } console.log(Submit!!!); console.log(values); }); } // 异步自定义校验校验用户名是否被占用 userExists(rule, value, callback) { if (!value) { callback(); } else { setTimeout(() { if (value JasonWood) { callback([new Error(抱歉该用户名已被占用。)]); } else { callback(); } }, 800); } } render() { const { getFieldProps, getFieldError, isFieldValidating } this.props.form; const nameProps getFieldProps(name, { rules: [ { required: true, min: 5, message: 用户名至少为 5 个字符 }, { validator: this.userExists }, ], }); const emailProps getFieldProps(email, { validate: [{ rules: [{ required: true }], trigger: onBlur, }, { rules: [{ type: email, message: 请输入正确的邮箱地址 }], trigger: [onBlur, onChange], }], }); return ( Form horizontal form{this.props.form} FormItem label用户名 hasFeedback help{isFieldValidating(name) ? 校验中... : (getFieldError(name) || []).join(, )} Input {...nameProps} placeholder实时校验输入 JasonWood 看看 / /FormItem FormItem label邮箱 hasFeedback Input {...emailProps} typeemail / /FormItem {/* 密码 / 确认密码 / 备注等字段同理 */} FormItem wrapperCol{{ span: 12, offset: 7 }} Button typeprimary onClick{this.handleSubmit.bind(this)}确定/Button /FormItem /Form ); } } BasicDemo createForm()(BasicDemo);对照旧版Validation可以注意到迁移要点字段值收集从手动setState变为Form内部维护ValueMixin 展示了表单内部如何从事件对象e.target.value/e.target.checked中提取值并写入formData校验触发时机可配置trigger: onBlur、trigger: [onBlur, onChange]等写法支持组合多种时机校验状态查询从实例方法变为 form 注入的函数getFieldError(field)、isFieldValidating(field)、getFieldValue(field)配合FormItem的hasFeedback、help属性可还原甚至超越旧Validation的交互表现。Progressformat属性的值改为函数0.12 中Progress的format属性推荐传入函数而不是节点。原来直接传 JSX 的写法Progress.Circle percent{100} format{Icon typecheck /} /需改为Progress.Circle percent{100} format{() Icon typecheck /} /从 components/progress/index.jsx 的实现看这一变更并非一刀切源码对三种类型都做了处理函数推荐text props.format(props.percent)函数接收当前百分比作为参数字符串向下兼容源码注释明确写着“向下兼容原来的字符串替换方式”会执行props.format.replace(${percent}, props.percent)即保留${percent}占位符替换语义其他类型一旦format不是函数就会触发warning警告——“antd.Progress props.format type is function, change format{xxx} to format{() xxx}”在开发环境控制台直接提示迁移方式。另外注意两个细节percent为 100 时Line与Circle都会自动把status置为success见 progress/index.jsx 第 40-42 行showInfo为false时不渲染文本区进度条占满容器。Tree0.12 的Tree有三个回调相关变更onSelect回调函数由原来的一个参数变为两个第一个为selectedKeys第二个为原来第一个参数里的其余信息。且selectedKeys里包含当前选中的节点 key而原来的不包含onCheck回调函数同样由一个参数变为两个第一个为checkedKeys第二个为原来第一个参数里的其余信息。checkedKeys里也包含了当前选中的节点 key这样免去了业务里自己组装 key 的工作异步 API 中onDataLoaded重命名为loadData其他不用改。仓库中 components/tree/index.jsx 是对rc-tree的轻量封装checkable为真时渲染自定义 checkbox 内层节点其余 props 透传因此参数签名变化来自底层rc-tree的升级。从源码结构看由于所有 props 直接透传给 rc-tree升级 antd 时同步满足 package.json 中rc-tree ~1.1.0的依赖版本即可业务侧只需按上述新签名调整回调函数的解构方式。0.10 0.110.11.x 版本有大量更新其中部分为不兼容更新以下列表为其中不兼容的更新及对应升级方案。默认加载样式样式不再会在antd中默认加载如果升级后组件没有样式开发者需要手动引入样式文件import antd/lib/index.css; // 或者 import antd/style/index.less;这与仓库 package.json 中files: [lib, style]的发布内容对应——lib是编译后的组件代码style对应仓库内的 style/ 目录含 index.less、core/、components/、mixins/ 等主题定制入口为 style/themes/default/index.less。表格远程模式Table的dataSource远程模式被移除用户需要自行实现数据获取方式。仓库内的 远程加载数据演示 给出了标准做法列定义中用filters数组、sorter: true声明式地开启筛选/排序不指定具体的onFilter与sorter函数而是把筛选排序参数发给服务端处理组件持有data、pagination、loading三份状态在handleTableChange(pagination, filters, sorter)中收集分页、筛选、排序参数并重新请求请求期间设置loading: true成功后回写data与pagination.total。核心代码骨架摘自 components/table/demo/ajax.mdconst columns [{ title: 姓名, dataIndex: name, filters: [ { text: 姓李的, value: 李 }, { text: 姓胡的, value: 胡 }, ], }, { title: 年龄, dataIndex: age, sorter: true, }, { title: 住址, dataIndex: address, }]; class Test extends React.Component { getInitialState() { return { data: [], pagination: {}, loading: false }; } handleTableChange(pagination, filters, sorter) { const pager this.state.pagination; pager.current pagination.current; this.setState({ pagination: pager }); this.fetch({ pageSize: pagination.pageSize, currentPage: pagination.current, sortField: sorter.field, sortOrder: sorter.order, ...filters, }); } fetch(params {}) { this.setState({ loading: true }); reqwest({ url: demo/data.json, method: get, data: params, type: json, success: (result) { const pagination this.state.pagination; pagination.total result.totalCount; this.setState({ loading: false, data: result.data, pagination }); } }); } componentDidMount() { this.fetch(); } render() { return ( Table columns{columns} dataSource{this.state.data} pagination{this.state.pagination} loading{this.state.loading} onChange{this.handleTableChange} / ); } }Timepicker、Datepicker 重命名Timepicker被重命名为TimePickerDatepicker被重命名为DatePickerTimepicker / TimePicker /Datepicker / DatePicker /相应地两个组件的文档地址也改为 date-picker 组件文档 和 time-picker 组件文档。受控的 DatePicker由于DatePicker已改为受控组件DatePicker显示的值必然与其value一致。从 components/date-picker/index.jsx 的实现可以清晰看到受控逻辑componentWillReceiveProps中仅当value存在于 nextProps 时才同步内部 statehandleChange中也仅在value in this.props为假时自行更新 state同时始终调用props.onChange。如果无法理解受控组件只须在发现“选中日期后 DatePicker 显示的值不变”的情况后把其value属性改为defaultValue即可。TimePicker locale 结构改变locale属性的结构发生了变化。以仓库中的 components/time-picker/locale/zh_CN.js 为例新结构是在rc-time-picker的 locale 基础上补充placeholderimport TimepickerLocale from rc-time-picker/lib/locale/zh_CN; const locale { placeholder: 请选择时间, ...TimepickerLocale, }; export default locale;即自定义 locale 应以底层 rc-time-picker 的 locale 为基底进行扩展而不是旧版本中扁平的属性集合。同样地date-picker 的 locale 文件 遵循相同模式。其他Alert 组件默认不展示图标样式可以用showIcon属性添加图标在 0.10.x 中 Datepicker 已废弃的onSelect属性被删除请使用onChange属性TimePicker 的hourOptions、minuteOptions、secondOptions属性已移除可使用disabledHours、disabledMinutes、disabledSeconds配合hideDisabled属性来完成原有功能。参考仓库内 禁止选项演示import { TimePicker } from antd; function newArray(start, end) { let result []; for (let i start; i end; i) { result.push(i); } return result; } function disabledHours() { let hours newArray(0, 60); hours.splice(20, 4); // 移除 20~23 点 return hours; } function disabledMinutes(h) { if (h 20) { return newArray(0, 31); // 20 点只能选 30~59 分 } else if (h 23) { return newArray(30, 60); // 23 点只能选 0~29 分 } return []; } ReactDOM.render( TimePicker disabledHours{disabledHours} disabledMinutes{disabledMinutes} /, mountNode );0.9 0.100.10.x 版本有大量改动是一个不完全向下兼容的版本以下文档尽力列出了 0.9.x 到 0.10.x 的不兼容变动。升级 React新版本推荐使用 react0.14.x 及以上版本并增加了对低版本 React 的警告。从 package.json 的 devDependencies 看仓库自身即以react: 0.14.x开发建议进行同步升级可参考 React 官方 0.14 发布公告。组件化改造0.10 对 Button、Iconfont、Layout、Form、Input 模块进行了 React 组件化的改造请基于新的使用方式修改原有的书写方式理论上无影响。示例button classNameant-btn ant-btn-primary按 钮/button Button typeprimary按钮/Buttoni classNameanticon anticon-appstore/i Icon typeappstore /改造后的实现可分别对应到 components/button/button.jsx、components/icon/index.jsx、components/layout/index.jsx、components/form/Form.jsx、components/input/index.jsx。size 属性统一原有组件的size属性统一为大中小三档large、default、small包括Button、Table、Tabs、Steps、Select、Pagination、InputNumber、Datepicker。示例Tabs sizemini ... /Tabs Tabs sizesmall ... /Tabs其他enter-animation组件下线请使用 queue-anim 来代替Carousel 升级依赖参考 carousel 组件文档 中新的 API 和使用方式进行修改antd.Notification()修改为小写的antd.notification()Datepicker 的onSelect属性修改为onChange属性Datepicker 的calendarStyle属性修改为popupStyle属性——这一点在当前代码中已体现为popupStyle默认值见 date-picker/index.jsx 第 18 行Dropdown 的onSelect属性应修正为onClick属性因为原有的onSelect只在变化时触发Slider 的withDots、isIncluded属性修改为dots、includediconfont 的基线更新可能导致原有图标的位置偏移。新版本变化较大以上升级指南可能有遗漏全部改动可以参考 Changelog。升级自查清单按升级路径核对以下关键点可快速完成迁移升级必查项验证方式0.9 → 0.10React 0.14、size取值、Notification改小写、onSelect→onChange/onClick、Slider 属性改名全局搜索旧属性名确认组件均带样式0.10 → 0.11手动引入antd/lib/index.css或antd/style/index.less、Table 改为自管数据源、Timepicker/Datepicker重命名、DatePicker 受控、TimePicker locale 结构调整打开控制台确认无样式缺失与受控异常0.11 → 0.12移除Validation改用Form校验、Progress.format改为函数、Tree的onSelect/onCheck新签名、onDataLoaded改名loadData控制台不再出现 Validation 废弃 warning 与 Progress format 警告若升级过程中遇到以上未提到的情况欢迎向项目提交 issue 反馈。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/9/18 3:56:19

Excel数据批量转Word工具拆解与Python实现

最近有朋友把“Excel 数据批量转 Word 工具(2026年最新版)”分享到群里,说是在国内一个软件分享社区看到的大神作品。我研究了一下这个工具的界面和架构,发现它比我之前想的要扎实得多,核心就一句话:读 Exc…

2026/9/18 3:56:19

CFturbo离心泵参数化设计:从叶轮选型到CFD验证的完整工程路径

简介:本资源为CFturbo泵与旋转机械专业设计工具软件的讲解型PPT,适合流体机械、水力机械及泵阀方向的工程师、科研人员与相关专业学生入门掌握软件核心功能。内容围绕CFturbo展开,系统介绍参数化叶轮设计、子午线线型/叶型设置、蜗壳匹配与叶…

2026/9/18 4:46:20

三跨线路云台实时视频录像监测装置选型部署与运维指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/18 4:46:20

oh-my-hermes:Hermes 智能体部署、配置与 WebUI 管理增强指南

给大家看个有点特别的思路。最近我在折腾 Hermes 这个智能体运行框架的时候,发现网上有不少人跟我一开始一样——照着 README 把服务跑起来了,结果后面真正用起来才发现一堆破事:模型配完一个换一个、API Key 散落在各个配置文件里、终端里敲…

2026/9/18 4:46:20

基于Hadoop的租车网站数据分析系统设计与实现

毕业设计拿到这个题目的时候,我第一反应是大数据组件搭建会很麻烦。但真正做完回头看,“基于Hadoop的租车网站的数据分析系统”其实是性价比很高的题目——它把Hadoop、数据分析、Web开发、可视化四块内容串在一起,既能体现技术深度&#xff…

2026/9/18 4:46:20

UDP转发架构实战:CNS/CLNS/CLNC三层部署与调优指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/18 4:41:20

Colibri语料模式挖掘:多词表达抽取与n-gram实战

做多词表达抽取那几年,我踩的第一个大坑不是算法,而是"太相信自己手写的规则"。当时手上有几十万条行业问答文本,任务是找领域里的固定搭配和术语。我一开始的做法很朴素:停用词表加正则,再配一份人工维护的…

2026/9/16 12:52:37

拯救者Y7000黑屏故障排查与维修实战指南

1. 项目概述:一台黑屏的拯救者Y7000,到底卡在哪一步? 联想拯救者Y7000系列笔记本,从2018年第一代搭载i5-8300H开始,到后来的i7-9750H、i7-10750H、i5-11400H,再到2023年款的R7-7840HS,它始终是学…

2026/9/18 0:01:09

Google Colab 实战:运行模型、数据加载与报错排查

1. 为什么我劝你先搞懂 Colab 的运行模型1.1 Colab 到底是什么,跟本地跑代码差在哪Google Colab 简单说就是一台跑在浏览器里的 Linux 虚拟机,你打开一个 Notebook,背后就连上了一台带 GPU 的远程机器。你在单元格里敲的每一行 Python&#x…

2026/9/18 0:01:09

C语言数据类型与表达式详解

1. C语言数据与数据类型概述在C语言编程中,数据是程序处理的核心对象。理解数据的分类和特性是掌握C语言的基础。C语言中的数据主要分为四大类:常量、变量、表达式和函数。这些数据类型构成了C语言程序的基本元素,每种类型都有其独特的特性和…

2026/9/18 0:01:09

SQL时间字段指定时间段查询:区间语义、索引与时区避坑

上周排查一个线上问题&#xff0c;用户反馈"昨天的订单一条都没查到"&#xff0c;但数据库里明明躺着两千多条。最后定位下来&#xff0c;不是数据丢了&#xff0c;也不是接口挂了&#xff0c;而是那个查询条件把时间段写成了> 2024-05-20 00:00:00 AND < 2024…

2026/9/16 22:55:57

USB Type-C PCB布局分区设计:电源、高速信号与PD协议全攻略

做硬件这行&#xff0c;Type-C接口算是典型的“看着简单&#xff0c;做起来全坑”的东西。光引脚就24个&#xff0c;高低速信号、电源、控制线全部塞在一个小小的连接器里&#xff0c;如果PCB布局不做规划&#xff0c;打样回来基本就是“插上没反应”、“高速掉线”、“静电一打…

2026/9/16 22:56:09

系统编程学习原型如何补齐稳定性边界

系统编程学习原型如何补齐稳定性边界预算有限时&#xff0c;我先优化明显多余的复制&#xff0c;而不是猜测性地换容器。用借用传递只读数据通常就能减少分配&#xff1a; fn parse(line: &str) -> Result<Item, Error> { /* ... */ }用基准确认热点确实在分配&am…

2026/9/16 22:56:16

雨花区哪家财务公司代理记账比较好?

在雨花区&#xff0c;企业处理财税事务常常面临诸多挑战&#xff0c;选择一家靠谱的财务公司至关重要。湖南巨勤财务管理咨询有限公司就是本地正规实体财税服务机构&#xff0c;深耕本地工商财税行业多年&#xff0c;熟悉当地工商局、税务局最新政策与申报流程。主营公司注册、…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
咨询二维码