antd2.x升至antd3.x最新

小曾大肉
2,069 阅读4分钟

当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,
	}
	componentDidMount() {
		this.setState({ visible: true }, () => {
			// 获取_input，antd2时可以，atnd3获取失败
		});
	}
	
	render() {
		return (
			<Modal visible={this.state.visible}>
				<Input ref={node => this._input = node} />
			</Modal>
		);
	}
}

由于antd3的Modal是引用了rc-dialog7.6.0组件，下面截图可以看到rc-dialog源码中对于Modal里的children渲染多了三元判断式。因此，对Modal初次设置visible为true,并且想立刻拿其children的ref是行不通的。

rc-dialog源码
因此需要给获取ref方法添加在异步任务

	componentDidMount() {
		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版本升至最新juejin.cn/post/684490…

avatar
文章
阅读
粉丝