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

Question

我到处都在搜寻此答案，但无济于事。例如，如果我在导航栏的右上角有一个菜单，其中有两个菜单项开始（1.登录。2。注册），并且当用户单击登录或注册并完成表格时，菜单项更改为（1注销2.我的帐户）。根据登录状态和角色，可能还会启用/禁用其他菜单项。

我找不到任何代码来举例说明如何完成任何操作，甚至没有如何动态禁用菜单项。我是material-ui的新手，但是已经编码了数十年。我可以使用javascript来执行此操作，但希望我们使用material-ui。

有人可以帮忙提供一个如何使用material-ui并做出反应的示例

Answer 1

材料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>