Question

所以我想知道如何创建一个菜单，当有人单击应用程序栏上的菜单图标时，该菜单会在左侧弹出。为了清楚起见，我正在谈论带有按钮的应用程序栏。这是它的代码：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } 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/icons/Menu';

const styles = {
  root: {
    flexGrow: 1,
  },
  flex: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
};

function ButtonAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon /> //I want a menu to pop up on the left-side when someone clicks this button
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ButtonAppBar);

Answer 1

您可以在任意一侧的应用栏中添加多个图标，点击图标时应提及该操作，请尝试这些步骤并在应用栏中获取菜单或搜索图标。

来源： Add search and menu in app bar

Answer 2

您可以有一个基于类的父组件（其中包含了所有状态和处理程序），然后您可以有一个导航组件和侧边栏组件（两者都应为无状态组件；根据您的使用情况），然后单击导航按钮上，您应该更改父组件上的相应状态；那么您应该根据该状态链接侧边栏组件的可见性。

实际上，我花了一点时间在这里创建了所需的内容，这只是一个简单的示例...
https://codesandbox.io/s/m86ko7vp

要添加动画，您可以使用react-motion或react-spring

应用程序栏中的菜单图标

2 个答案: