When ANTD 4.0 came out, the company’s back office management project ANTD was still a 2.x version. In order not to fall behind, it was time to update ANTD. Have to say that ANTD official maintenance is very good, follow antD3 upgrade official documents go, can easily upgrade up. The following is a list of changes outside of the official document

1. Some modifications not mentioned officially

  • Col componentsspan,offsetThe property must be Number, otherwise an error is reported
  • TimePicker componentsallowEmptyInstead ofallowClear
  • The Input of themaxLengthThe property must be Number, otherwise an error is reported
  • The Select component is obsoletecomboboxMode, useAutoCompleteComponent replacement.
  • Input.TextAreaComponent properties useautoSizeInstead ofautosize
  • TreeSelectIn the componenttreeDatausingtitleInstead oflabel
  • A singleCheckboxComponents usecheckedInstead ofvalueAlthough ANTD2 also asks for CHECKED, antD3 does not report an error when using value in a projectCheckbox.GroupContains theCheckboxYou should also usevalue
  • Not similar<i className="anticon anticon-check"></i>This uses the ANTD icon style, as in3.9.0After that, the FONT icon was replaced with an SVG icon
  • TagcomponentafterCloseWill be abandoned, usedonCloseInstead of
  • Modal.methodIn the methodiconTypeAbandoned,iconInstead of

2. In Modal component, the ref cannot be obtained at the first rendering

In some cases, if we want to open a Modal popover, we get the children’s ref, for example, to get the Input Input focus. For example, the following code example, atND2 when writing code is ok, can be upgraded to ANTD3 after obtaining ref failed.

class MyModal extends React.Component {
	state = {
		visible: false,
	}
	componentDidMount() {
		this.setState({ visible: true= > {}, ()// Atnd3 failed to obtain _input
		});
	}
	
	render() {
		return (
			<Modal visible={this.state.visible}>
				<Input ref={node= > this._input = node} />
			</Modal>); }}Copy the code

Since the Modal of ANTD3 refers to the RC-Dialog 7.6.0 component, you can see in the screenshot below that the children in rC-Dialog source code is rendered with three judgements in Modal. Therefore, it is not possible to set Modal visible to true for the first time and immediately take the children’s ref.

	componentDidMount() {
		this.setState({ visible: true= > {}, ()Promise.resolve().then((a)= > {
				/ / get _input})}); }Copy the code

3. After the components packaged with ConfigProvider are uninstalled, the internationalization of Modal

As we know, antD’s Modal. Method is simply used to confirm actions, or to prompt, but if you want to add some forms to Modal and have the ability to close pop-ups, you have to go back to the normal Modal component. But we wanted to have Modal. Method easy to call and flexible configuration of normal Modal components, so we wrote a Modal syntactic sugar method in the company project. The following

// separate_mount.js
function separate_mount(Component) {
    if (typeofComponent ! = ='function') {
        throw new Error('Decorator: Accept Only Component arguments');
    }

    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}> click </Button> </div>); }}Copy the code

You can see that in the separate_mount function, the reactdom. render method is rewrapping the ConfigProvider to culture the component. This is because the component decorated by separate_mount is detached from the maintenance of the root component and therefore needs to be reconfigured for internationalization. The problem is that when you close the component decorated by Separate_mount, you call modal. method elsewhere and you find that it changes back to English culture. This is because ANTD sets modal.Method internationalization back to the default value when it listens to the ConfigProvider uninstallation. Refer to the documentation to see that someone offers a temporary solution. After you have unmounted the ConfigProvider in separate_mount, mount a new culture ConfigProvider.

function separate_mount(Component) {
    if (typeofComponent ! = ='function') {
        throw new Error('Decorator: Accept Only Component arguments');
    }

    let obj = {
        show(props = {}) {

            / / uninstall 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;

                    / / new 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; }Copy the code

This method is indeed feasible, but ultimately not the final solution, ANTD3 is not to solve this problem, or to antD4, or less use of this decoration method.

4, summarize

Upgrading the ANTD process was relatively easy, but I did learn a lot. The update will enable you to use the Table component to support shift, Drawer, List, Descriptions, Statistic, and other components to facilitate rapid front-end development. This time, the React version of the project will also be updated juejin.cn/post/684490…