Question

我使用的是 material-ui 官网的 mini 变体抽屉

https://material-ui.com/components/drawers/#drawer

我正在尝试转换为类组件，但是出现了很多问题，出现了崩溃。其中一些与钩子相关并通过节点模块发生。任何主体都可以在类组件中使用此组件

  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>
    )
  }

Answer 1

不能在类组件中使用钩子。在您的类中创建一个状态属性并使用它。

来自反应文档：Converting a Function to a Class

<块引用>

你可以通过五步将像Clock这样的函数组件转换为一个类：

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

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>
    );
  }
}

将材质 ui 功能组件 Mini 变体抽屉转换为类组件 Reactjs

1 个答案: