如何在按钮单击时更改菜单？答案

【问题标题】：How to change menu on button click?如何在按钮单击时更改菜单？
【发布时间】：2021-05-18 11:18:02
【问题描述】：

我正在尝试在 react 应用中创建基于身份验证的菜单。

菜单数据：

const menuItems = {
    primaryMenus: [
      { title: 'Messages' },
      { title: 'Register' },
      {
        subMenus: { 
          title: 'Account',
          menus: [{ title: "Profile" }, { title: "Change Password"}],
        },
      },
      { title: 'Help' }
    ],
  };

根据以上数据，我需要建立菜单结构。

到目前为止我尝试过的代码

  const menuItems = {
    primaryMenus: [
      { title: 'Messages' },
      { title: 'Register' },
      {
        subMenus: { 
          title: 'Account',
          menus: [{ title: "Profile" }, { title: "Change Password"}],
        },
      },
      { title: 'Help' }
    ],
  };


function App() {

  const [ isAuthenticated, setAuthenticated ] = React.useState(false);
  
  return(
  <div>
   <button onClick={() => {setAuthenticated(!isAuthenticated)}}>            {isAuthenticated ? 'Logout' : 'Login'} </button>

   <ul className="menu">
    {menuItems.primaryMenus.map((menu, i) => { 
        return (
        !menu.subMenus ?
          <li key={i}> {menu.title} </li>
          :
          <li key={i}>
            {menu.subMenus.title}
           <ul>
           { menu.subMenus.menus.map((submenu, j) => {
             return <li key={j}> {submenu.title} </li>
           }) }
           </ul>
          </li>
        )
    })}
   </ul>
   
    <h1> The menu Messages and Help will be there for both logged in user and logged out user </h1>
   <br />
   <h1> Whereas the Register menu will be available only if user is logged out </h1>
   <br />
      <h1> My Account menu and its submenus will be available only if user is logged in </h1>
   </div>
  )

}





ReactDOM.render(<App />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

要求：

登录用户的菜单结构：

- Messages
- Account
   - Profile
   - Change Password
- Help

已注销用户的菜单结构：

- Messages
- Register
- Help

我也可以修改提供的json结构(menuItems)..

请帮助我实现上述结果。

我是新来的反应，所以如果有人可以为我提供一个纯反应身份验证方式的解决方案，那么它对我来说会更有帮助..

【问题讨论】：

通过你的代码的外观，你可以检查是否经过身份验证和子菜单!menu.subMenus && !isAuthenticated。
我希望这不是在您的应用中进行身份验证的方向。我会使用 redux 来存储用户身份验证状态，而不是使用组件状态。
@designtocode，感谢您的评论。您能否为我提供解决方案，如何以纯反应方式处理它，因为我对它完全陌生？提前谢谢..
作为一个建议，如果您的应用程序变得更大，最好拥有一个包含用户数据的全局状态/存储。您可以在此处找到有关 redux 的更多信息 redux.js.org 或者您可以按照本指南操作，该指南在父 App 组件状态 digitalocean.com/community/tutorials/…

标签： javascript html reactjs authentication menu

【解决方案1】：

我建议您更改数组menuItems 的结构。比如这样：

  const menuItems = [
    { title: 'Messages', whenLoggedIn: true, whenLoggedOut: true },
    { title: 'Help', whenLoggedIn: true, whenLoggedOut: true },
    { title: 'Register', whenLoggedIn: false, whenLoggedOut: true },
    {
      title: 'Account',
      whenLoggedIn: true,
      whenLoggedOut: false,
      subMenuItems: [{ title: 'Profile' }, { title: 'Change password' }],
    },
  ];

然后你可以像这样使用它们：

      const keepMenuItem = (menuItem, isAuthenticated) => 
        (isAuthenticated && menuItem.whenLoggedIn) 
        || (!isAuthenticated && menuItem.whenLoggedOut)


    return (
        <ul className="menu">
          {menuItems.filter(menuItem => keepMenuItem(menuItem, isAuthenticated)
                    .map(menuItem => (
            <li key={menuItem.title}>
              {menuItem.title}
              {!!menuItem.subMenuItems && (
                <ul>
                  {menuItem.subMenuItems.map(subMenuItem => (
                    <li key={subMenuItem.title}>{subMenuItem.title}</li>
                  ))}{' '}
                </ul>
              )}
            </li>
          ))}
        </ul>
      );

【讨论】：