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

Question

我正在尝试在 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)..

请帮助我实现上述结果。

我是 React 新手，所以如果有人能以纯 React 身份验证方式为我提供解决方案，那对我会更有帮助..

Answer 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>
      );

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

How to change menu on button click?

html

javascript

authentication

menu

reactjs