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

发布时间:2026/11/4 16:34:16

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/10/25 21:09:32

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

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

2026/10/25 2:56:10

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

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

2026/11/4 16:33:06

LeetCode 中等题「无重复字符的最长子串」详解

摘要 本文针对 LeetCode 中等题「无重复字符的最长子串」,提供两种 Java 实现方案:暴力枚举双层循环版本,方便初学者理解题意;滑动窗口(双指针 HashSet)版本,是面试和提交的标准最优解。文章附…

2026/11/4 16:33:06

指纹浏览器里的环境是什么意思?

平时我们用普通 Chrome 开多个窗口,哪怕开 10 个,网站看到的还是同一台电脑。很多人刚上手指纹浏览器,第一眼就被 “环境” 这个词卡住,不知道它和普通浏览器窗口、无痕模式差别在哪。简单类比:一个环境 一台独立的虚…

2026/11/4 16:33:06

智能外呼系统哪家强?2026大模型语音交互与高可用架构排行榜

本文目录:一、从传统规则树到大模型外呼:技术排行榜核心评估维度的代际变化二、大模型智能外呼系统5大代表性厂商技术盘点三、企业级大模型外呼系统的底层架构能力矩阵四、标杆工程实践:某商业银行远程外呼与广医一院智能随访五、技术团队选型…

2026/11/4 16:33:06

你以为的资产,可能正在掏空你的口袋

你以为的资产,可能正在掏空你的口袋为什么全款买的车不算资产?为什么贷款房不一定是负债?存款到底算不算"钱在生钱"?一、先破一个最大的认知误区大多数人判断"我有没有钱",看的是:我名…

2026/11/4 16:27:59

09-06-内存-资源泄漏检测与治理

资源泄漏检测与治理篇章:09-核心技术-内存管理篇 | 阅读时间:约 40 分钟 | 前置知识:了解 Unity 资源系统和 GC 基本概念一、引言资源泄漏是 Unity 项目中最隐蔽的内存问题。泄漏的资源在被完全释放前,会持续占用内存并增加 GC 压…

2026/11/4 12:38:23

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代,基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而,与配合度高的人类不同,宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态,更无法控制光照环境。实际应用中,我们常…

2026/11/3 14:24:53

SSM电子书店源码全解析:结构、原理、部署与排错实战

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

2026/11/4 0:03:20

AI辅助技术栈评估:提升研发决策效率60%

1. 项目背景与核心价值技术决策一直是研发团队面临的重大挑战。随着技术生态的快速演进,技术栈的选择、维护和迭代变得愈发复杂。我们团队在过去两年里,先后经历了三次重大技术栈迁移,每次都需要投入大量人力进行技术评估和风险分析。直到去年…

2026/11/4 0:03:20

从生成Token到直接决策:Jev如何重塑AI Agent工程实践

1. 从"生成文字"到"拍板决策":Jev 到底在解决什么问题大多数人第一次接触大模型,脑子里建立的模型是"输入问题、输出文字"。你问它今天天气怎么样,它给你一段描述;你让它写个周报,它给你…

2026/11/4 0:03:20

32G统一内存跑大模型:内存账、TPS实测与端云分流

想在一台 32G 统一内存的小主机上把大模型跑成"日常可用",这件事我前后折腾了小半年。标题里说的这台 Mac mini M6,是我们这次讨论的目标平台,具体到手规格以实物为准;但下面这套推算方法和实测思路,对任何统…

2026/11/4 12:38:23

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代,基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而,与配合度高的人类不同,宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态,更无法控制光照环境。实际应用中,我们常…

2026/11/3 14:24:53

SSM电子书店源码全解析:结构、原理、部署与排错实战

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

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

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

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