28

我在玩material-ui。我使用路由实现了 LeftNav，但我找不到获取 IconMenu 或使用链接或路由的菜单的方法。任何人都可以指出一个好的来源/教程？文档不足，两个组件似乎都不支持“menuItems”作为 LeftNav 的属性。

4

15 回答 15

65

另一个姗姗来迟的更新：

containerElement不再支持 prop ，请改用componentprop 。

在这里查看文档。

2016 年 12 月编辑：该linkButton道具已弃用，您将收到警告：

Warning: Unknown props `linkButton` on <a> tag.

所以只需删除道具：

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

这是一个示例 Repo和Live Demo Here。

原答案：

只是想指出，如果您使用的是 react-router，您可能想要使用<Link to="/some/page" />而不是<a>标签。

为此，您需要使用containerElement道具

<MenuItem
  linkButton
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

（={true}如果您只是通过，则可以省略true，换句话说，<MenuItem linkButton />与 相同<MenuItem linkButton={true} />）

containerElementandlinkButton道具实际上记录在按钮部分中，但您也可以在其中使用它MenuItem。

于 2015-12-29T09:03:26.063 回答
29

从 Material-UI 1.0 开始，新语法为：

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

（注意：此示例不包含图标。为此有一个新ListItemIcon组件。）

于 2018-02-27T22:55:23.460 回答
14

您可以将linkButtton道具设置MenuItem为生成链接，然后还添加一个href.

<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />
于 2015-08-25T20:15:02.403 回答
10

react 16.4.2 和 react-router 4.2.2 的现有答案（2018 年 9 月）都不适合我，所以这是我的解决方案：

<Link to='/notifications' style={{ textDecoration: 'none' }}>
   <MenuItem>Notifications</MenuItem>
</Link>

如您所见，MenuItem 组件被 Link 组件包围，并且我添加了一个样式textDecoration: 'none'，使该项目不带下划线。

于 2018-09-27T11:54:01.683 回答
7

的道具linkButton已EnhancedButton弃用。href提供属性时不再需要 LinkBut​​ton 。它将在 v0.16.0 中删除。

<MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>

工作正常

于 2016-11-17T11:21:33.773 回答
7

截至 2020 年 9 月，唯一有效且超级简单的是

<MenuItem component="a" href="/your-path">Click Me</MenuItem>

奖励：添加带有徽章的图标：

<MenuItem component="a" href="/your-path">
        <IconButton color="inherit" href="/your-path">
              <Badge badgeContent="12" color="secondary">
                <StarsSharpIcon color="action"/>
              </Badge>
        </IconButton>
Click Me
</MenuItem>
于 2020-09-24T00:40:53.937 回答
4

使用 M-UI 4.x 你可以设置一个component道具MenuItem

<MenuItem component='a' href='link/to/some/page'>Sample Link</MenuItem>
于 2020-12-04T10:03:24.063 回答
3

在自己做了一些搜索之后，我选择了一个稍微不同的解决方案：

<MenuItem onClick={() => {handleClose("/#about")}}>About me</MenuItem>

带有配套的 JS 功能：

function handleClose(nav) {
    window.location.href = nav;
}

希望证明可以用作替代品。

于 2019-08-03T21:29:41.150 回答
2 
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { Link } from 'react-router-dom';


<MenuItem component={Link} to='/login'>
       Login
</MenuItem>

通过使用 React Router 和 MenuItem 的 Link 属性，这对我有用，2021 年 9 月。

于 2021-09-25T22:55:37.843 回答
1

onTouchTap 对我不起作用我必须使用 onClick 参见下面的示例

  <MenuItem 
    onClick={this.logout}
    containerElement={<Link to="/" />}
    primaryText="Sign out"
    rightIcon={
      <b style={style.rightIcon}>
        <img
          className="menu-img"
          src="img/app/logout.png"
          alt="logout"
        />
      </b>
    }
  />

希望这对其他人也有帮助

于 2017-11-01T06:13:06.487 回答
1

您可以使用react-route-dom和 MenuItem onClick属性首先导入 react-router-dom: import { useHistory } from 'react-router-dom' 然后声明一个函数来处理您的组件中的 onClick: const navigate = () => history.push('route/to/navigate') 然后使用您的 MenuItem <MenuItem onClick={navigate}>Navigate</MenuItem>

于 2020-01-01T18:58:01.230 回答
1

从v5.2.2 开始，您可以使用：

import { MenuItem } from '@mui/material';
import { Link } from 'react-router-dom';

<MenuItem component={Link} to="/profile">
  Profile
</MenuItem>
于 2021-12-01T13:34:14.487 回答
0

这是我的实现，和material-ui官网里的一模一样。您可以使用的组件包括AppBar和。可以实现为.DrawerListItemSelectableListlet SelectableList = MakeSelectable(List)

<div>
  <AppBar 
    onLeftIconButtonTouchTap={this.handleLeftIconButtonTouchTap}
    title={title}
    showMenuIconButton={true}
    zDepth={0}
  />
    <Drawer 
      open={this.state.open} 
      docked={true} 
      onRequestChange={(open, reason) => {
        this.setState({open:false})
      }}
    >
      <AppBar title={title} />
      <SelectableList
        value={location.pathname}
        onChange={this.handleRequestChangeList}
       >
        <Subheader>Selectable Contacts</Subheader>
        <ListItem
          value={"link1"}
          primaryText="Link1"
        />
        <ListItem
          value={"link2"}
          primaryText="Link2"
        />
      </SelectableList>
    </Drawer>
 </div>
于 2016-09-27T14:25:47.223 回答
0

我无法containerElement在 iOS 的 Safari 上使用react-router. 我正在使用0.17.2Material UI，react-router@v3这是一个对我有用的解决方法：

  <MenuItem
    onTouchTap={() => {
      this._yourMethod()
      browserHistory.push('/howItWorks')
    }}
    primaryText="Menu Link"
  />
于 2017-04-14T12:48:24.810 回答
0

这对我有用 v5

对于外部链接

<MenuItem
    component={"a"}
    href={"https://example.com"}
>Go here</MenuItem>

或内部链接

import { MenuItem } from "@mui/material";
import { Link } from "react-router-dom";
<MenuItem
    component={Link}
    to={"/users/2323"}
>Go here</MenuItem>
于 2022-02-14T04:57:57.677 回答