Reactjs 使用管线的材质UI菜单

我在玩弄材料界面。我使用routes实现了LeftNav，但是我找不到一种方法来获取IconMenu，或者使用链接或routes的菜单。有人能给我指一个好的源代码/教程吗？文档不足，两个组件似乎都不像LeftNav那样支持“menuItems”属性。

您可以在

MenuItem

上设置

linkButtton

属性以生成链接，然后还可以添加

href

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

---

另一个过期已久的更新：

containerElement

prop不再受支持，请改用

component

prop

查看文档

---

2016年12月编辑：链接按钮

道具已弃用，您将收到警告：

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

（如果只传递
true
，则可以省略
={true}
，
换句话说，
与
相同）

containerElement
和
linkButton
道具实际上是有文档记录的，但您也可以在
菜单项中使用它。
这是我的实现，它看起来与material ui官方网站中的完全一样。您可以使用的组件包括
AppBar
、
Drawer
和
ListItem
。
SelectableList
可以实现为
let SelectableList=MakeSelectable（List）


{
this.setState（{open:false}）
}}
>
可选触点
增强按钮的属性
链接按钮
已被弃用。如果提供了
href
属性，则不再需要LinkButton。
它将与v0.16.0一起移除

链接项

工作正常
我无法使用
react router在iOS中的Safari上使用
containerElement
。我正在使用材质UI的
0.17.2
，并
react-router@v3
这里有一个适合我的解决方案：

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

{
这是你的方法（）
browserHistory.push（“/howItWorks”）
}}
primaryText=“菜单链接”
/>
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>
    }
  />



希望这也能帮助其他人
从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年9月）都不适用于我的react 16.4.2和react router 4.2.2，因此这是我的解决方案：

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

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


通知

正如您所看到的，MenuItem组件被Link组件包围，我添加了一个样式
textDecoration:“none”
，以便不在项目下面划线。
在对自己进行了一点搜索之后，我使用了一个稍微不同的解决方案：

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

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

希望能证明它是一种替代品
 您可以使用react route dom和MenuItemonClick属性首次导入react router dom：

从“react router dom”导入{useHistory}

然后声明一个函数来处理组件中的onClick：

const-navigate=（）=>history.push（'route/to/navigate'）
然后使用菜单项

导航
自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>


点击我
使用M-UI 4.x，您可以在
MenuItem
上设置一个
组件
道具

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

示例链接
链接现在已断开，在网站的任何地方都看不到任何按钮链接文档。这可能是我想要的，所以谢谢你的发帖。我不知道你所说的真实的东西是什么意思？更新了，谢谢提醒！（也更新了真实内容）我还看到onTouchTap是一种通过与菜单项交互获取事件的方法。是的，但是使用
onTouchTap
/
onClick
触发页面更改而不是
/
会丢失一些本机功能，例如浏览器中的链接预览，以及用户在新选项卡中打开链接的能力。这对我不起作用，看看这是不是真的，不幸的是，这似乎不再是真的。这是截至2016年11月29日的最佳答案。你也可以使用类似
target=“\u blank”的东西
要在新的浏览器窗口中打开链接，这是一个选项，但会重新加载整个页面，而
link
的元素不会。相反，可以简单地将
菜单项
：
主页
包装起来，不做任何解释就投票否决一个答案是没有帮助的。我必须添加
提纲：“无”
。谢谢。这是惊人的，这样的基本信息是失踪的完美。。。如我所需。这也适用于Material UI中的
ListItem
。它可以工作，但您应该知道使用
a
会导致页面重新加载。它可以工作，但您应该知道使用
a
会导致页面重新加载。导致页面重新加载的
a
的含义是什么？@jkschin react通常用于单个页面应用程序方式（SPA），其中一个好处是避免整个页面的重新加载。
<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>

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