如何将react函数转换为class？

如何解决如何将react函数转换为class？

我使用了材质UI来开发react.js前端。但是，当我要进一步开发它（以实现crud操作）时，很难编写代码，因为每个教程都是使用 class 而不是 function 进行编码的。因此，我尝试将代码转换为类。但是我做得不好。

所以我只想请你们帮我将下面的代码转换为类。我要感谢您的好意。谢谢。

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。

export default class Step2 extends React.Component {
}

并使用this.props之类的道具代替props