ReactJS函数到类组件的转换

如何解决ReactJS函数到类组件的转换

我是新来的反应者，我正在尝试将抽屉式菜单的功能组件转换为类组件，但是不知何故没有得到相同的输出。我想尝试一些正确的方向，因为我尝试了某些步骤和一些codeandBox，但是CSS却大不相同。谢谢。

下面是功能组件代码：

import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import Badge from '@material-ui/core/Badge';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import NotificationsIcon from '@material-ui/icons/Notifications';
import { mainListItems } from './listItems';

const drawerWidth = 300;

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex'
  },toolbar: {
    paddingRight: 24,// keep right padding when drawer closed
    backgroundColor: '#6E8035'
  },toolbarIcon: {
    display: 'flex',alignItems: 'center',justifyContent: 'flex-end',padding: '0 8px',...theme.mixins.toolbar
  },appBar: {
    zIndex: theme.zIndex.drawer + 1,transition: theme.transitions.create(['width','margin'],{
      easing: theme.transitions.easing.sharp,duration: theme.transitions.duration.leavingScreen
    })
  },appBarShift: {
    marginLeft: drawerWidth,width: `calc(100% - ${drawerWidth}px)`,duration: theme.transitions.duration.enteringScreen
    })
  },menuButton: {
    marginRight: 36
  },menuButtonHidden: {
    display: 'none'
  },title: {
    flexGrow: 1
  },drawerPaper: {
    position: 'relative',backgroundColor: '#6E8035',whiteSpace: 'Nowrap',width: drawerWidth,transition: theme.transitions.create('width',drawerPaperClose: {
    overflowX: 'hidden',duration: theme.transitions.duration.leavingScreen
    }),width: theme.spacing(7),[theme.breakpoints.up('sm')]: {
      width: theme.spacing(9)
    }
  },appBarSpacer: theme.mixins.toolbar,content: {
    flexGrow: 1,height: '100vh',overflow: 'auto'
  },container: {
    paddingTop: theme.spacing(4),paddingBottom: theme.spacing(4)
  },paper: {
    padding: theme.spacing(2),display: 'flex',overflow: 'auto',flexDirection: 'column'
  },fixedHeight: {
    height: 240
  }
}));

export default function Dashboard() {
  const classes = useStyles();
  const [open,setopen] = React.useState(true);
  const handleDrawerOpen = () => {
    setopen(true);
  };
  const handleDrawerClose = () => {
    setopen(false);
  };

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="absolute"
        className={clsx(classes.appBar,open && classes.appBarShift)}
      >
        <Toolbar className={classes.toolbar}>
          <IconButton
            edge="start"
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            className={clsx(
              classes.menuButton,open && classes.menuButtonHidden
            )}
          >
            <MenuIcon />
          </IconButton>
          <Typography
            component="h1"
            variant="h6"
            color="inherit"
            Nowrap
            className={classes.title}
          ></Typography>
          <IconButton color="inherit">
            <Badge badgeContent={4} color="secondary">
              <NotificationsIcon />
            </Badge>
          </IconButton>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        classes={{
          paper: clsx(classes.drawerPaper,!open && classes.drawerPaperClose)
        }}
        open={open}
      >
        <div className={classes.toolbarIcon}>
          <IconButton onClick={handleDrawerClose}>
            <ChevronLeftIcon />
          </IconButton>
        </div>
        <Divider />
        <List>{mainListItems}</List>
      </Drawer>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={3}></Grid>
        </Container>
      </main>
    </div>
  );
}