如何将反应函数转换为类？答案

【问题标题】：How to convert the react function into class?如何将反应函数转换为类？
【发布时间】：2020-09-25 06:19:03
【问题描述】：

我使用 material-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>
    );
}

【问题讨论】：

把function Step2(props) { ... } 变成class Step2 extends React.Component { function render() { ... } }。在函数体中使用this.props 而不是props。
我刚试过。但是有一个错误。
啊..很好。这是一个拼写错误。谢谢。
@RomanHocke 如果要添加构造函数，是不是应该在render()之前？
只要你了解 react 组件的生命周期，将 componentDidMount、componentDidUpdate 和 componentWillUnmount 转换为 useEffect react 钩子应该是微不足道的。一旦精通功能组件，您可能不想使用/创建基于类的组件。 IMO 功能化 -> 基于类是倒退的。

标签： reactjs function class

【解决方案1】：

你现在在这个函数的参数中获得道具，只需将函数更改为类。

export default class Step2 extends React.Component {
}

并使用 this.props 之类的道具而不是 props

【讨论】：

我也试过这个。但问题是函数之前的样式。
import withStyles 并用 withStyles 替换 makeStyles 然后用 const classes = useStyle;像这样const useStyles = withStyles((theme) => ({})const classes = useStyles;
那个const classes = useStyles; 应该在render(){...} 里面对吧！？
是的，应该在 return 之上和内部渲染函数。
还有一件事，如果您发现它有帮助，请接受正确的答案。