如何将react函数转换为class? [英] How to convert the react function into class?
问题描述
我使用了Material-UI来开发react.js前端.但是,当我要进一步开发它(以实现crud操作)时,很难编写代码,因为每个教程都是使用 class 而不是 function 进行编码的.因此,我尝试将代码转换为类.但是我没有正确地做到这一点.
I'm used the material-UI to develop the react.js frontend. But when I'm gonna develop it furthermore(to implement the crud operations), it's hard to code, since every tutorial coded by using class, not a function. So, I tried to convert the code into the class. But I failed to do that properly.
所以我只想请你们帮我将下面的代码转换为类.我要感谢您的好意.谢谢.
So I just ask you guys to help me to convert the below code into the class. I would like to appreciate your kindness. Thank you.
import React from "react";
import ReactDom from 'react-dom';
import Button from '@material-ui/core/Button';
import { Container, Row, Col, Form } from "react-bootstrap";
import TextField from '@material-ui/core/TextField';
import { makeStyles, withStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: '25ch',
},
},
button: {
marginRight: theme.spacing(1),
},
}));
export default function Step2(props) {
const classes = useStyles();
return (
<Container style={{marginRight: 700}}>
<Row
style={{ marginTop: "30px" }}
className="h-100 justify-content-center align-items-center"
>
<Col md={{ span: 6 }} className="text-center my-auto">
<h3 style={{ marginBottom: "1rem" }}>New Vehicle Details</h3>
<Form>
<form className={classes.root} noValidate autoComplete="off">
<TextField id="standard-basic" label="Vehicle No." required/>
</form>
<form className={classes.root} noValidate autoComplete="off">
<TextField id="standard-basic" label="Registered Year." required/>
</form>
<form className={classes.root} noValidate autoComplete="off">
<TextField id="standard-basic" label="Capacity" required/>
</form>
<form className={classes.root} noValidate autoComplete="off">
<TextField id="standard-basic" label="Type" required/>
</form>
<Button
variant="contained"
color="primary"
//onClick={handleNext}
className={classes.button}
>
Add
</Button>
<Button
variant="contained"
color="secondry"
// onClick={handleNext}
className={classes.button}
>
Cancel
</Button>
</Form>
</Col>
</Row>
</Container>
);
}
推荐答案
您现在可以在该函数的参数中获取道具,只需将函数更改为class.
you are now getting props in parameters of this function just change the function to class.
export default class Step2 extends React.Component {
}
,并使用诸如 this.props
之类的道具代替 props
and use props like this.props
instead of props
这篇关于如何将react函数转换为class?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!