Javascript 如何获得可重用的菜单组件？

我正在尝试设置一个简单的React应用程序，它只有一个AppBar，我想要打开一个菜单。每当我单击AppBar项目时，我都会使用材质ui进行样式设置。当我第一次单击“项目”或“编辑”项时，菜单成功显示，但不知道如何关闭此菜单。您可以在上找到工作样本

请注意，维护目录结构非常重要。

appbaritems.js

import React, { Component } from "react";
import { Button, ButtonGroup } from "@material-ui/core";
import MenuContent from "./menucontent";

class AppBarItems extends Component {
  constructor() {
    super();
    this.state = { menuAnchor: null };
  }

  handleClick = (event) => {
    this.setState({ menuAnchor: event.currentTarget });
  };
  handleClose = () => {
    this.setState({ menuAnchor: null });
  };
  render = () => {
    return (
      <div>
        <ButtonGroup
          variant="contained"
          color="primary"
          aria-label="contained primary button group"
        >
          <Button
            className="dense toolbarbutton"
            disableElevation
            onClick={this.handleClick}
          >
            Project
          </Button>
          <Button
            className="dense toolbarbutton"
            disableElevation
            onClick={this.handleClick}
          >
            Edit
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            View
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Layer
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Settings
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Plugin
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Vector
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Raster
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Database
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Web
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Processing
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Help
          </Button>
        </ButtonGroup>
        <MenuContent anchorEl={this.state.menuAnchor} />
      </div>
    );
  };
}

export default AppBarItems;

import React，{Component}来自“React”；
从“@material ui/core”导入{Button，ButtonGroup}”；
从“/MenuContent”导入菜单内容；
类AppBarItems扩展组件{
构造函数（）{
超级（）；
this.state={menuAnchor:null}；
}
handleClick=（事件）=>{
this.setState（{menuAnchor:event.currentTarget}）；
};
handleClose=（）=>{
this.setState（{menuAnchor:null}）；
};
渲染=（）=>{
返回(
项目
编辑
看法
层
设置
插件
矢量
光栅
数据库
网状物
处理
帮助
);
};
}
导出默认AppBarItems；

meucontent.js

import React, { Component } from "react";
import { Menu, MenuItem } from "@material-ui/core";

class MenuContent extends Component {
  handleClose = () => {
    console.log("Don't know how to handle closing of this menu");
  };
  render = () => {
    return (
      <Menu
        elevation={0}
        anchorEl={this.props.anchorEl}
        open={Boolean(this.props.anchorEl)}
        onClose={this.handleClose}
      >
        <MenuItem>Item 1</MenuItem>
        <hr />
        <MenuItem>Item 2</MenuItem>
        <hr />
        <MenuItem>Item 3</MenuItem>
      </Menu>
    );
  };
}

export default MenuContent;

import React，{Component}来自“React”；
从“@material ui/core”导入{Menu，MenuItem}”；
类MenuContent扩展组件{
handleClose=（）=>{
log（“不知道如何处理关闭此菜单”）；
};
渲染=（）=>{
返回(
项目1

项目2

项目3
);
};
}
导出默认菜单内容；

您可以在

AppBarItems

组件中利用

handleClose

方法。只需将此作为道具传递给

MenuContent

<MenuContent anchorEl={this.state.menuAnchor} handleClose={this.handleClose} />

如果在单击菜单项时也需要关闭

菜单

，则可以使用与

菜单项

onClick相同的属性

<MenuItem onClick={this.props.handleClose}>Item 1</MenuItem>

项目1

---

多亏了它的魅力，我不知道我可以通过这个方法作为道具。

<MenuItem onClick={this.props.handleClose}>Item 1</MenuItem>