当antd4.0出来之际,公司后台管理项目antd还是2.x版本,为了不落下脚步,是时候更新一波antd了。不得不说antd官方维护得很好,跟着antd3升级官方文档走,就能够轻易地升级上去。以下列举了官方文档之外的修改点
1、一些官方未提到的修改点
- Col组件
span
、offset
属性必须为Number,否则报错 - TimePicker组件
allowEmpty
改为allowClear
- Input的
maxLength
属性必须为Number,否则报错 - Select 组件废弃了
combobox
模式,使用AutoComplete
组件代替。 Input.TextArea
组件属性使用autoSize
代替autosize
TreeSelect
组件中treeData
中用title
代替label
- 单个
Checkbox
组件使用checked
代替value
(尽管antd2也要求checked,但项目中使用value未报错,antd3会报错),使用Checkbox.Group
包含的Checkbox
还应使用value
- 不能类似
<i className="anticon anticon-check"></i>
这样使用antd图标样式,因为在3.9.0
之后,使用了 SVG 图标替换了原先的 font 图标 Tag
组件afterClose
将废弃,用onClose
代替Modal.method
方法中iconType
废弃,用icon
代替
2、Modal组件中,初次渲染拿不到ref
有些场景,我们想打开Modal弹窗,就获取其children的ref,例如拿到Input输入聚焦。例如下面代码例子,atnd2时写的代码是没问题的,可升级至antd3后就获取ref失败了。
class MyModal extends React.Component {
state = {
visible: false,
}
handleClick = () => {
this.setState({ visible: true }, () => {
// 获取_input,antd2时可以,atnd3获取失败
});
}
render() {
return (
<div>
<Button onClick={this.handleClick}>点击</Button>
<Modal visible={this.state.visible}>
<Input ref={node => this._input = node} />
</Modal>
</div>
);
}
}
由于antd3的Modal是引用了rc-dialog7.6.0组件,下面截图可以看到rc-dialog源码中对于Modal里的children渲染多了三元判断式。因此,对Modal初次设置visible为true,并且想立刻拿其children的ref是行不通的。
因此需要给获取ref方法添加在异步任务
handleClick = () => {
this.setState({ visible: true }, () => {
Promise.resolve().then(() => {
// 获取_input
})
});
}
3、将用ConfigProvider包裹的组件卸载后,Modal.method的国际化失效
我们知道,antd的Modal.method只是用来简单地确认操作、或者提示,如果想在Modal里加一些Form表单,并且能够自主决定是否关闭弹窗,那么就得用回普通的Modal组件了。可我们想有Modal.method的方便调用,又想普通Modal组件的灵活配置,因此公司项目中写了一个Modal的语法糖方法。如下
// separate_mount.js
function separate_mount(Component) {
if (typeof Component !== 'function') {
throw new Error('decorator : 只接受Component参数');
}
let obj = {
show(props = {}) {
let mountedDom = document.createElement('div');
document.body.appendChild(mountedDom);
function innerDestroy(){
if(mountedDom){
ReactDOM.unmountComponentAtNode(mountedDom);
mountedDom.parentNode && mountedDom.parentNode.removeChild(mountedDom);
mountedDom = null;
}
}
ReactDOM.render(
<ConfigProvider locale={zhCN}>
<Component
{...props}
destroy={innerDestroy}
/>
</ConfigProvider>,
mountedDom
);
}
};
return obj;
}
// MyModal.js
@separate_mount
class MyModal class extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.defaultValue || '',
}
}
render() {
return (
<Modal visivle={true}>
<Input
value={this.state.value}
onChange={e => this.setState({ value: e.target.value })}
/>
</Modal>
);
}
}
// Page.js
class Page extends React.Component {
showModal = () => {
MyModal.show({
defaultValue: 'defaultValue',
});
}
render() {
return (
<div>
<Button onClick={this.showModal}>点击</Button>
</div>
);
}
}
可以看到在separate_mount
函数中,ReactDOM.render方法里要重新包裹ConfigProvider让组件中文化。这是因为separate_mount装饰的组件是脱离根组件的维护,因此要重新配置国际化。
但是问题就出现了,当关闭了separate_mount装饰的组件后,在其他地方调用Modal.method会发现其变回了英文化。这是因为antd监听到ConfigProvider卸载时,将Modal.method国际化设回了默认值。
参考文档
看到那个文档中有人提供了临时解决方案。也就是关闭separate_mount装饰的组件后(同时卸载了separate_mount中的ConfigProvider),重新挂载一个新的中文化ConfigProvider。
function separate_mount(Component) {
if (typeof Component !== 'function') {
throw new Error('decorator : 只接受Component参数');
}
let obj = {
show(props = {}) {
// 卸载ConfigProvider
const configProviderContainer = document.getElementById('config-container');
if (configProviderContainer) {
ReactDOM.unmountComponentAtNode(configProviderContainer);
configProviderContainer.parentElement.removeChild(configProviderContainer);
}
let mountedDom = document.createElement('div');
document.body.appendChild(mountedDom);
function innerDestroy(){
if(mountedDom){
ReactDOM.unmountComponentAtNode(mountedDom);
mountedDom.parentNode && mountedDom.parentNode.removeChild(mountedDom);
mountedDom = null;
// 新建ConfigProvider
let container = document.createElement('div');
container.id = 'config-container';
document.body.append(container);
ReactDOM.render(React.createElement(ConfigProvider, {
locale: zhCN,
}, ''), container);
}
}
ReactDOM.render(
<ConfigProvider locale={zhCN}>
<Component
{...props}
destroy={innerDestroy}
/>
</ConfigProvider>,
mountedDom
);
}
};
return obj;
}
这种办法确实可行,但终究不是最终方案,antd3是没有解决这个问题的,要么升至antd4了,或者少用这中装饰方法。
4、总结
升级antd过程,相对没有太大困难,但也确实学习到很多。关于这次升级带来的好处就是,可以使用Table组件支持shift键多选(终于不用公司项目封装的了),Drawer抽屉组件,List组件,Descriptions描述列表, Statistic统计数值等等,方便前端快速开发。这次也将项目的react版本升至最新https://blog.csdn.net/weixin_41559882/article/details/106680717