在物料界面中动态增加、删除、更改、停用、启用菜单项，并做出反应

Question

我到处找这个答案都没有用。例如，如果我在navbar的右上方有一个菜单，其中有两个菜单项要启动(1.login.2.Register)，当用户单击login或Register并完成表单时，菜单项会更改为(1.logout2.My Account）。还可能有其他菜单项将根据登录状态和角色启用/禁用。

我找不到任何代码来给出如何实现这一点的示例，甚至不知道如何动态禁用菜单项。我对material-ui是个新手，但已经编码了几十年。我可以使用JavaScript来完成这个操作，但我想要我们的材质UI。

有没有人可以提供一个如何使用material-ui和react来实现这一点的例子

Answer 1

Material UI为您提供组件，并为您处理大部分UI状态（打开/关闭等），根据我的理解，您所描述的是您必须自己完成的事情。

我的方法是使用某种组件,通过如下对象生成链接：

const links = {
  loggedIn: [{text: "Logout", path: "/logout"}, {text: "myAccount", path: "/dashboard"}],
  loggedOut: [{text: "Login", path: "/login"}, {text: "Register", path: "/register"}] 
}

然后，我将有一个变量来保存在这种情况下我感兴趣的值：

const linksToShow = state.user ? links.loggedIn : links.loggedOut

然后在返回/呈现（我不确定组件本身，所以我将在这里发布一些通用代码）：

<Menu>
  {state.user ? linksToShow.map(link => <Link to={link.path}>{link.text}</Link>)}
</Menu>