在 material-ui 中动态添加、删除、更改、禁用/启用菜单项并做出反应答案

【问题标题】：Add, Delete, Change, Disable/Enable menu items dynamically in material-ui and react在 material-ui 中动态添加、删除、更改、禁用/启用菜单项并做出反应
【发布时间】：2020-09-16 20:07:21
【问题描述】：

我到处寻找这个答案都无济于事。例如，如果我在导航栏的右上角有一个菜单，有两个菜单项要启动（1.登录。2.注册），当用户单击登录或注册并完成表单时，菜单项变为（1 注销 2. 我的帐户）。可能还有其他菜单项将根据登录状态和角色启用/禁用。

我找不到任何代码来举例说明如何完成这些，甚至找不到如何动态禁用菜单项。我是 material-ui 的新手，但已经编码了几十年。我可以用 javascript 做到这一点，但希望我们使用 material-ui。

有人可以帮忙举个例子，说明如何使用 material-ui 和 react 来做到这一点

【问题讨论】：

标签： reactjs typescript react-router material-ui react-router-dom

【解决方案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>

【讨论】：

非常感谢佩德罗！这正是我一直在寻找的。很有帮助。
很高兴能帮到你 ;)
我仍然对如何启用动态禁用菜单项感到困惑。有很多关于如何做到这一点的例子，但不是在代码中。佩德罗有什么想法吗？
嘿！这些事情的工作方式是有条件地渲染某些东西（在这种情况下是您的链接），然后处理该条件。如果您对呈现哪些链接有任何其他依赖关系，您可以将它们添加到状态中并按照答案中的示例进行操作。