如何在 React 中將“功能組件”轉換為“類組件”？

Question

我想轉換這個Functional Component

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            Tiket.hu
          </Typography>
          <Button color="inherit">Search</Button>
          <Button color="inherit">Basket</Button>
          <FacebookLoginButton/>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default App;

到 Class 組件，如下所示，但出現錯誤。 你知道出了什么問題嗎？

import React, { Component } from "react";
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

class App extends Component {
    classes = useStyles();
    render() {
      return <div className="App">
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={this.classes.menuButton} color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={this.classes.title}>
              Tiket.hu
            </Typography>
            <Button color="inherit">Search</Button>
            <Button color="inherit">Basket</Button>
            <FacebookLoginButton/>
          </Toolbar>
        </AppBar>
      </div>;
    }
}

export default App;

你知道出了什么問題嗎？ 我應該如何進行不同的轉換？

Answer 1

Material-ui MakeStyles 正在使用鈎子模式，這在 class 組件中是不允許的。
改用 withStyles HOC。

import { withStyles } from '@material-ui/core/styles';

const styles = {
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
};

class App extends Component {
    const { classes }  = this.props;
    the rest of your component...
}

export default withStyles(styles)(App);

Answer 2

您必須使用帶有 class 組件的材料 ui HOC

import React, { Component } from "react";
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"

// import this
import { withStyles } from '@material-ui/core/styles';

// make this
const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
})

class App extends Component {
    render() {
      return <div className="App">
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={this.props.classes.menuButton} color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={this.props.classes.title}>
              Tiket.hu
            </Typography>
            <Button color="inherit">Search</Button>
            <Button color="inherit">Basket</Button>
            <FacebookLoginButton/>
          </Toolbar>
        </AppBar>
      </div>;
    }
}

export default withStyles(styles)(App);

Answer 3

您在Class Component中使用hooks ，這是不允許的。 鈎子專門用於Functional Components