问如何在物料界面中使用href
EN

Stack Overflow用户

提问于 2020-09-19 05:46:38

回答 1查看 1.3K关注 0票数 0

我之前问过这段代码，但措辞很糟糕。我正在尝试让我的menuItems与href一起工作，到目前为止，我的"Home“按钮可以用于href，但我无法获得”会话主页“、”预订会话“或"S宿主会话”。

如有任何帮助，我们将不胜感激：

P.S: onClick：() => {Console.log()}在“会话之家”中工作，但仅此而已。

Header.js

import React from "react";
import MenuButton from "./MenuButton.js";

const Header = () => {
    const menu = [
        {
            name: "Home",
            href: "/",
        },
        {
            name: "Sessions",
            menuItems: [
                {
                    name: "Sessions Home",
                    href: "/sessions",
                    key: "Sessions",
                    onClick: () => {Console.log("This button click works!")}
                },
                {
                    name: "Book a Session",
                    href: "/sessions/book",
                    key: "Book"
                },
                {
                    name: "[S] Host a session",
                    href: "/sessions/host",
                    key: "Host"
                }
            ]
        }
    ];
    return menu.map((item, index) => <MenuButton key={index} menu={item} />);
};
export default Header;

MenuButton.js

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

const MenuButton = ({ menu }) => {
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    if(menu.menuItems == null){
        return (
            <>
                <Button
                    aria-controls={`${menu.name}-menu`}
                    aria-haspopup="true"
                    href={menu.href}
                    onClick={handleClick}
                >
                    {menu.name}
                </Button>
            </>
        );
    } else {
        return (
            <>
                <Button
                    aria-controls={`${menu.name}-menu`}
                    aria-haspopup="true"
                    onClick={handleClick}
                >
                    {menu.name}
                </Button>
                <Menu
                    id={`${menu.name}-menu`}
                    anchorEl={anchorEl}
                    getContentAnchorEl={null}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={handleClose}
                >
                    {menu.menuItems.map((item) => (
                        <MenuItem href={item.href} key={item.href} onClick={item.onClick}>
                            {item.name}
                        </MenuItem>
                    ))}
                </Menu>
            </>
        );
    }
};

export default MenuButton;

javascript

reactjs

material-ui

回答 1

Stack Overflow用户

发布于 2020-09-19 05:55:59

你可以做这样的事

 <MenuItem
  component={Link}
  // the 'to' prop (and any other props not recognized by MenuItem itself)
  // will be passed down to the Link component
  to="/profile">
  Profile
</MenuItem>