如何在物料界面中使用href
如何在物料界面中使用href
提问于 2020-09-19 13:46:38
我之前问过这段代码，但措辞很糟糕。我正在尝试让我的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;回答 1
Stack Overflow用户
发布于 2020-09-19 13: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>Github发布参考解决方案。https://github.com/mui-org/material-ui/issues/204#issuecomment-167754150
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63969497
复制相关文章
相似问题
腾讯云开发者
