ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

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

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),仅供参考
返回列表