Я использую ANTJS для реакции, и это было очень просто в использовании. Теперь они обновили свою версию 3 до 4. В версии 4 код был свернут.
С тех пор я использую ANT JS во всем своем коде, который находится в версии 3. Я хочу обновить до v4. ANT JS предоставил инструмент для переноса кода из ANT JS v3 в v4. Я использовал инструмент, но он не работает для меня. Вот страница входа, разработанная в ANT JS v3:
import React from 'react';
import axios from "axios";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Input, notification, Result } from 'antd';
import Cookies from 'universal-cookie';
import context from '../context';
import { withRouter } from 'react-router-dom'
import { Card, Elevation } from "@blueprintjs/core";
import { Helmet } from 'react-helmet'
const TITLE = 'PROCESSOR'
const cookies = new Cookies();
class Login extends React.Component{
static contextType = context;
state ={ username : "", password : "", loginLoading: false, networkCheck:false }
async onLogin(){
this.props.form.validateFields(['username','password'], (err, values) => {
if (!err) {
if(this.state.username && this.state.password){
(async () => {
var loginData = new FormData()
loginData.set('username',this.state.username)
loginData.set('password',this.state.password)
this.setState({ loginLoading: true })
try{
var response = await axios({ method : 'post', url : 'http://localhost:5001/login', data : loginData, });
if (response.status === 200 && response.data.success && response.data.token){
this.setState({networkCheck:false})
cookies.set('loginToken', response.data.token, { path: '/' })
this.props.history.push('/');
}
}
catch(err){
if(err.message === 'Network Error'){
this.setState({networkCheck:true, componentLoading:false})
console.log(err.message)
}
}
this.setState({ loginLoading: false })
})();
}
}
})
}
backtoLogin(){
cookies.remove('loginToken', { path: '/' })
this.props.history.push('/');
}
render(){
const { getFieldDecorator } = this.props.form;
return (
<div style={{display:'flex', backgroundColor:"#809596", height: '100%', justifyContent: 'center', alignItems: 'center' }}>
{
this.state.networkCheck?
<div >
<Result
status="404"
title="404"
subTitle="Sorry, Network Error."
extra={<Button onClick={this.backtoLogin.bind(this)} type="primary">Back to Login Page </Button>}
/>
</div>
:
<div style = {{display:'flex', alignItems:'center',alignContent:'center', justifyContent:'center', height:'100%',width:'100%'}}>
<Helmet>
<title>{ TITLE }</title>
</Helmet>
<Card style={{backgroundColor:"#c4ccc6", width:'25%', alignContent:'center' }} elevation={Elevation.TWO}>
<div style = {{display:'flex',color:'black', justifyContent:'center', fontSize:'130%', fontFamily:'"Lucida Sans Unicode", "Lucida Grande", sans-serif'}}>Flax Data Processor</div>
<hr></hr>
<Form.Item >
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please enter Username!', whitespace: true }],
onChange: (event) => { this.setState({ username: event.target.value }) },
})(<Input prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Enter Username" />)}
</Form.Item>
<Form.Item >
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please enter Password!', whitespace: true }],
onChange: (event) => { this.setState({ password: event.target.value }) },
})(<Input.Password prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Enter Password" />)}
</Form.Item>
<hr></hr>
<div style= {{display:'flex',justifyContent:'center'}}>
<Button key="submit" type="primary" loading={this.state.loginLoading} onClick={this.onLogin.bind(this)}>Login</Button>
</div>
</Card>
</div>
}
</div>
);
}
}
export default withRouter(Form.create({ name: 'register' })(Login));
В последней версии 4 ANT JS они удалили Form.create и getFieldDecorator и упростили. Я использовал эту команду для переноса
npx -p @ant-design/codemod-v4 antd4-codemod src/Login.js
Выход I получен:
Transform v3-Icon-to-v4-Icon
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
SKIP src/screens/Login.js
All done.
Results:
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 1.243seconds
Transform v3-Modal-method-with-icon-to-v4
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
SKIP src/screens/Login.js
All done.
Results:
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 1.214seconds
Transform v3-component-with-string-icon-props-to-v4
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
SKIP src/screens/Login.js
All done.
Results:
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 1.306seconds
Transform v3-Component-to-compatible
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
SKIP src/screens/Login.js
All done.
Results:
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 1.166seconds
Transform v3-LocaleProvider-to-v4-ConfigProvider
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
SKIP src/screens/Login.js
All done.
Results:
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 1.150seconds
Transform v3-typings-to-compatible
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
SKIP src/screens/Login.js
All done.
Results:
0 errors
0 unmodified
1 skipped
0 ok
Time elapsed: 1.097seconds
----------- antd4 dependencies alert -----------
It's recommended to install or upgrade these dependencies to ensure working well with antd4
> package.json file: /home/paulsteven/temp-data-filters/sec_data-filters/flax-ui/package.json
* Update antd^4.0.0 in dependencies
----------- Thanks for using @ant-design/codemod 1.0.2 -----------
Выше приведен результат, который я получил. Код не меняется. Я могу сделать это руководство относительно процедуры, которую они предоставили в своих документах. Но есть много файлов для меня, чтобы изменить. Помогите мне обновить мой код до последней версии 4 ANT JS автоматически.