使用路线的材料UI菜单

问题描述

我正在玩Material-ui.我使用路由实现了LeftNav，但是找不到找到IconMenu或Menu来处理链接或路由的方法.任何人都可以为我指出一个好的资源/教程吗?该文档不足，并且两个组件似乎都不像LeftNav那样支持'menuItems'作为属性.

I am toying with material-ui. I implemented LeftNav using routes, but I could not find a way to get IconMenu, or Menu working with links or routes. Anyone can point me to a good source / tutorial? The documentation falls short, and both components seem not to support 'menuItems' as property as LeftNav does.

推荐答案

2016年12月 linkButton道具已被弃用，您会收到警告:

2016 December the linkButton prop is deprecated, you will get a warning:

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

所以只需移除道具:

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

此处是示例存储库，以及此处的实时演示.

原始答案:

Original answer:

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

Just wanted to point out that if you're using react-router, you might want to use <Link to="/some/page" /> rather than the <a> tag.

为此，您需要使用containerElement道具

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

(如果仅通过true，则可以省略={true}， 换句话说，<MenuItem linkButton />与<MenuItem linkButton={true} />相同)

(the ={true} can be omitted if you're only passing true, in other words, <MenuItem linkButton /> is same as <MenuItem linkButton={true} />)

containerElement和linkButton道具实际上在按钮"部分中记录了 ，但您也可以在MenuItem中使用它.

The containerElement and linkButton props is actually documented in the buttons section, but you can use it in MenuItem as well.

这篇关于使用路线的材料UI菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！