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} />
)
}
}