antd v3升级 v4

1,197 阅读1分钟

antd官方升级: ant.design/docs/react/…

ant-design-pro官方升级(不必要): pro.ant.design/docs/upgrad…

步骤: 1、官方提供升级

npx -p @ant-design/codemod-v4 antd4-codemod src

若提示需要commit,可以加--force强制执行

npx -p @ant-design/codemod-v4 antd4-codemod src --force

结果:

  • Update antd^4.0.0 in dependencies
  • Install @ant-design/icons^4.0.0
  • Install @ant-design/compatible^1.0.0
  • Update @ant-design/pro-layout^5.0.0 in dependencies
  • Update react^16.9.0 in dependencies
  • Update react-dom^16.9.0 in dependencies

2、全局搜:antd/es和antd/lib,看是否有引入Form,替换为

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

3、安装提示包 (为了避免报错可以一个一个包安装,看是否能跑得起来)

npm install --save @ant-design/compatible
npm install antd@4.0.0 --save
npm install react@16.9.0 --save
npm install react-dom@16.9.0 --save
npm install --save @ant-design/icons
npm install --save @ant-design/pro-layout
// 安装报错加--legacy-peer-deps

如果把antd升级到4.9.4会报错

Uncaught TypeError: Super expression must either be null or a function
at _inherits (index.less?2508:45)
at index.js:25
at Module.<anonymous> (index.js:25)
at Module../src/component/SearchForm/index.js (index.js:37)
at __webpack_require__ (bootstrap:771)
at fn (bootstrap:129)
at Module.<anonymous> (GuaranteeCompensationPartnerCtl.less?e6f1:45)
at Module../src/controller/product/detail/PartnerListCtl.js (PartnerListCtl.js:21)
at __webpack_require__ (bootstrap:771)
at fn (bootstrap:129)

实验:最高升级到4.4.1就会报错了

原因:原先写法是:

export default class NewForm extends Form{
	statix ....
}

v4版本采用hooks,有些继承写法可能不适用 改成

export default class NewForm extends React.Component{
	render() {
    	return (
        	<Form {...this.props} />
        )
    }
}

参考: www.cnblogs.com/wyLeoKing/p…