Question

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

Answer 1

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

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

所以简单地删除道具：

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

Here's an Example Repo和the 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} />）

相同

containerElement和linkButton道具实际上已记录in the buttons section，但您也可以在MenuItem中使用它。

Answer 2

您可以在linkButtton上设置MenuItem支柱以生成链接，然后添加href。

<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />

Answer 3

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

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

工作正常

Answer 4

在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组件。）

Answer 5

（2018年9月）的现有答案中没有一个对我来说适用于react 16.4.2和react-router 4.2.2，所以这是我的解决方案：

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

如您所见，MenuItem组件被Link组件包围，并且我添加了一个样式textDecoration：无，不带下划线。

Answer 6

经过一些自我搜索之后，我得到了一个略有不同的解决方案：

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

具有支持的JS功能：

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

希望能证明它是替代品。

Answer 7

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

Answer 8

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

Answer 9

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

希望这也有助于其他人

Answer 10

使用M-UI 4.x，您可以在component上将MenuItem道具设置为类似

<MenuItem component='a' href='link/to/some/page'>Sample Link</MenuItem>

Answer 11

这是我的实现，看起来与material-ui官方网站中的内容完全相同。您可以使用的组件包括true && { echo; } # works，AppBar和Drawer。 ListItem可以实现为SelectableList。

let SelectableList = MakeSelectable(List)

Answer 12

我无法使用containerElement在iOS上使react-router工作。我正在使用材质用户界面0.17.2和react-router@v3，这是一个适用于我的工作：

  <MenuItem
    onTouchTap={() => {
      this._yourMethod()
      browserHistory.push('/howItWorks')
    }}
    primaryText="Menu Link"
  />

使用路径的材质UI菜单

12 个答案: