Reactjs 将材质ui功能组件迷你变量抽屉转换为类组件

我使用的迷你变型抽屉从材料用户界面官方网站

我正试图转换成类组件，但出现了很多问题。其中一些是挂钩相关的，通过节点模块发生。 任何主体都可以在类组件中使用此组件吗

  import React from 'react'
  import clsx from 'clsx'
  import {
    createStyles,
    makeStyles,
    useTheme,
    Theme
  } from '@material-ui/core/styles'
  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 CssBaseline from '@material-ui/core/CssBaseline'
  import Typography from '@material-ui/core/Typography'
  import Divider from '@material-ui/core/Divider'
  import IconButton from '@material-ui/core/IconButton'
  import MenuIcon from '@material-ui/icons/Menu'
  import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
  import ChevronRightIcon from '@material-ui/icons/ChevronRight'
  import ListItem from '@material-ui/core/ListItem'
  import ListItemIcon from '@material-ui/core/ListItemIcon'
  import ListItemText from '@material-ui/core/ListItemText'
  import InboxIcon from '@material-ui/icons/MoveToInbox'
  import MailIcon from '@material-ui/icons/Mail'

  const drawerWidth = 240

  const useStyles = makeStyles((theme: Theme) =>
    createStyles({
      root: {
        display: 'flex'
      },
      appBar: {
        zIndex: theme.zIndex.drawer + 1,
        backgroundColor: 'transparent',
        transition: theme.transitions.create(['width', 'margin'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen
        })
      },
      appBarShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen
        })
      },
      menuButton: {
        marginRight: 36
      },
      hide: {
        display: 'none'
      },
      drawer: {
        width: drawerWidth,
        flexShrink: 0,
        whiteSpace: 'nowrap'
      },
      drawerOpen: {
        width: drawerWidth,
        transition: theme.transitions.create('width', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen
        })
      },
      drawerClose: {
        transition: theme.transitions.create('width', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen
        }),
        overflowX: 'hidden',
        width: theme.spacing(7) + 1,
        [theme.breakpoints.up('sm')]: {
          width: theme.spacing(9) + 1
        }
      },
      toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar
      },
      content: {
        flexGrow: 1,
        padding: theme.spacing(3)
      }
    })
  )

  export default function MiniDrawer () {
    const classes = useStyles()
    const theme = useTheme()
    const [open, setOpen] = React.useState(true)

    const handleDrawerOpen = () => {
      setOpen(true)
    }

    const handleDrawerClose = () => {
      console.log('close clicked =')
      setOpen(false)
      console.log('open =', open)
    }

    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position='fixed'
          className={clsx(classes.appBar, {
            [classes.appBarShift]: open
          })}
        >
          <Toolbar>
            <IconButton
              color='inherit'
              aria-label='open drawer'
              onClick={handleDrawerOpen}
              edge='start'
              className={clsx(classes.menuButton, {
                [classes.hide]: open
              })}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant='h6' noWrap>
              Mini variant drawer
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer
          variant='permanent'
          className={clsx(classes.drawer, {
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open
          })}
          classes={{
            paper: clsx({
              [classes.drawerOpen]: open,
              [classes.drawerClose]: !open
            })
          }}
        >
          <div className={classes.toolbar}>
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === 'rtl' ? (
                <ChevronRightIcon />
              ) : (
                <ChevronLeftIcon />
              )}
            </IconButton>
          </div>
          <Divider />
          <List>
            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
              <ListItem button key={text}>
                <ListItemIcon>
                  {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                </ListItemIcon>
                <ListItemText primary={text} />
              </ListItem>
            ))}
          </List>
          <Divider />
          <List>
            {['All mail', 'Trash', 'Spam'].map((text, index) => (
              <ListItem button key={text}>
                <ListItemIcon>
                  {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                </ListItemIcon>
                <ListItemText primary={text} />
              </ListItem>
            ))}
          </List>
        </Drawer>
        <main className={classes.content}>
          <div className={classes.toolbar} />
          <Typography paragraph></Typography>
          <Typography paragraph></Typography>
        </main>
      </div>
    )
  }

从“React”导入React
从“clsx”导入clsx
进口{
创建样式，
制作风格，
使用主题，
主题
}来自“@material ui/core/styles”
从“@material ui/core/Drawer”导入抽屉
从“@material ui/core/AppBar”导入AppBar
从“@material ui/core/Toolbar”导入工具栏
从“@material ui/core/List”导入列表
从“@material ui/core/CssBaseline”导入CssBaseline
从“@material ui/core/Typography”导入排版
从“@material ui/core/Divider”导入分隔器
从“@material ui/core/IconButton”导入IconButton
从“@material ui/icons/Menu”导入菜单图标
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon
从“@material ui/icons/ChevronRight”导入ChevronRightIcon
从“@material ui/core/ListItem”导入ListItem
从“@material ui/core/ListItemIcon”导入ListItemIcon
从“@material ui/core/ListItemText”导入ListItemText
从“@material ui/icons/MoveToInbox”导入收件箱
从“@material ui/icons/Mail”导入MailIcon
常数抽屉宽度=240
const useStyles=makeStyles（（主题：主题）=>
创建样式({
根目录：{
显示：“flex”
},
appBar：{
zIndex:theme.zIndex.drawer+1，
背景色：“透明”，
transition:theme.transitions.create（['width'，'margin']{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen
})
},
appBarShift：{
页边左侧：抽屉宽度，
宽度：`calc（100%-${drawerWidth}px）`，
transition:theme.transitions.create（['width'，'margin']{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.enteringScreen
})
},
菜单按钮：{
marginRight:36
},
隐藏：{
显示：“无”
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
空白：“nowrap”
},
抽屉式绳索：{
宽度：抽屉宽度，
transition:theme.transitions.create（'width'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.enteringScreen
})
},
抽屉式：{
transition:theme.transitions.create（'width'{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen
}),
溢出x:'隐藏'，
宽度：主题。间距（7）+1，
[theme.breakpoints.up（'sm'）：{
宽度：主题。间距（9）+1
}
},
工具栏：{
显示：“flex”，
对齐项目：“居中”，
justifyContent:“柔性端”，
填充：主题。间距（0，1），
//内容必须位于应用程序栏下方
…theme.mixins.toolbar
},
内容：{
flexGrow:1，
填充：主题。间距（3）
}
})
)
导出默认函数迷你抽屉（）{
常量类=useStyles（）
const theme=useTheme（）
const[open，setOpen]=React.useState（true）
常量handleDrawerOpen=（）=>{
setOpen（真）
}
常量handleDrawerClose=（）=>{
console.log（'单击关闭='）
setOpen（假）
console.log（'open='，open）
}
返回(
迷你变型抽屉
{theme.direction==='rtl'(
) : (
)}
{['Inbox'，'Starred'，'Send email'，'Drafts'].map（（文本，索引）=>(
{索引%2==0？：}
))}
{['All mail'，'Trash'，'Spam'].map（（文本，索引）=>(
{索引%2==0？：}
))}
)
}

不能在类组件中使用挂钩。在类中创建一个state属性并使用它

从react文档：

您可以通过五个步骤将功能组件（如时钟）转换为类：

• 创建一个扩展React.Component的同名ES6类
• 向其中添加一个名为render（）的空方法
• 将函数体移动到render（）方法中
• 在render（）主体中用this.props替换props
• 删除剩余的空函数声明

类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={date:new date（）}；
}
render（）{
返回(
你好，世界！
它是{this.state.date.toLocaleTimeString（）}。
);
}
}

我有另一个问题，关于钩子

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}