dva框架下 react 15 升级到 react 16 dva 1.x 升级到 dva 2.x(react-router4) antd 2.x升级到 antd 4

React ^15.4.0 升级到 ^16.8.0

"react": "^15.4.0", "react-dom": "^15.4.0", "react": "^16.8.0", "react-dom": "^16.8.0", npm install react@16.8.0 react-dom@16.8.0 --save

react 16 以下这种方式已经废弃，需要安装 prop-types 引入

npm install prop-types --save import React, { Component, PropTypes } from 'react'; // 已废弃 import PropTypes from 'prop-types'; // react 16 Bread.propTypes = { location: PropTypes.object, };

升级了之后 一直会报这个错误，最后把 dva 升级到 2.1.0 之后就好了

Dva 1.2.1 升级到 2.1.0

npm install dva@2.1.0 --save

Warning: Please use require("history").createHashHistory instead of require("history/createHashHistory"). Support for the latter will be removed in the next major release. 将 node_modules/dva/lib/index.js 里面的 require(‘history/createHashHistory’) 替换。

var _createHashHistory = require('history/createHashHistory'); var _createHashHistory = require("history").createHashHistory;

antd 2.7.1 升级到 4.6.2

升级之后语言默认为英文

import { ConfigProvider } from 'antd'; import zhCN from 'antd/lib/locale/zh_CN';

移除了 Form.create 方法，form 现可由 Form.useForm 获取。 onSubmit() 使用 onFinish() 代替。

Icon 移除掉，修改为引入

<Icon type="question" /> // 移除 // 修改为 npm install --save @ant-design/icons import { QuestionOutlined } from '@ant-design/icons'; <QuestionOutlined />

Cannot read property ‘getFieldDecorator’ of undefined 移除了getFieldDecorator 方法，修改成以下这种写法。

import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Form, Input, Button, Checkbox } from 'antd'; const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16, }, }; const tailLayout = { wrapperCol: { offset: 8, span: 16, }, }; const Demo = () => { const onFinish = (values) => { console.log('Success:', values); }; return ( <Form {...layout} name="basic" initialValues={{ remember: true, }} onFinish={onFinish} > <Form.Item label="Username" name="username" rules={[ { required: true, message: 'Please input your username!', }, ]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[ { required: true, message: 'Please input your password!', }, ]} > <Input.Password /> </Form.Item> <Form.Item {...tailLayout}> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ReactDOM.render(<Demo />, document.getElementById('container'));