如何管理多个导航项状态? [英] How to manage multiple navigation items states?

问题描述

我正在尝试使用 antd 组件实现水平菜单.

当点击 nav 项目时，子菜单显示不正确.

const MenuList = [{name: "导航二-子菜单",子菜单路由:[{name: "A- item1",网址:/item1Url1"},{name: "A - item2",网址:/item1Url2"}]},{name: "导航三-子菜单",子菜单路由:[{name: "B- item1",网址:/item1Url1"},{name: "B - item2",网址:/item1Url2"}]}];函数 TextAreaManager() {const [showMenu, setShowMenu] = useState(false);返回 (<Tabs onTabClick={() =>setShowMenu(prev => !prev)}>{MenuList.map(item => {返回 (<标签面板标签={<><图标类型=设置"/>{项目名称}<图标类型={showMenu ?上":下"}style={{ marginLeft: "10px" }}/></>}>{showMenu &&(<菜单>{item.subMenuRoutes.map(childItem => {返回 (<Menu.Item key={childItem.url}>{childItem.name}</Menu.Item>);})}</菜单>)}</TabPane>);})}</Tabs>);

解决方案

有几个问题需要处理:

1. 为每个数组项分配唯一键以正确呈现组件.

   menuList.map(item => );

2. 您需要管理每个菜单的状态，以便使用相应的图标正确显示菜单showMenuManager[item.name]:

setShowMenuManager(prev => {const newState = { ...initMenuState, [e]: !prev[e] };控制台日志(新状态)；返回新状态；})}/>;

const initMenuState = {导航二-子菜单":false，导航三-子菜单":false};函数 TopMenuManager() {const [showMenuManager, setShowMenuManager] = useState(initMenuState);返回 (<标签... >{menuList.map(item => (<标签面板键={item.name}标签={<>...<图标type={showMenuManager[item.name] ?上":向下"}/></>}>{showMenuManager[item.name] &&...}</TabPane>))}</Tabs>);}

检查最终的

I'm trying to implement a horizontal menu with antd components.

When clicking the nav items the submenu is not showing correctly.

Codesandbox demo.

const MenuList = [
  {
    name: "Navigation two - Submenu",
    subMenuRoutes: [
      {
        name: "A- item1",
        url: "/item1Url1"
      },
      {
        name: "A - item2",
        url: "/item1Url2"
      }
    ]
  },
  {
    name: "Navigation Three - Submenu",
    subMenuRoutes: [
      {
        name: "B- item1",
        url: "/item1Url1"
      },
      {
        name: "B - item2",
        url: "/item1Url2"
      }
    ]
  }
];

function TextAreaManager() {
  const [showMenu, setShowMenu] = useState(false);
  return (
    <Tabs onTabClick={() => setShowMenu(prev => !prev)}>
      {MenuList.map(item => {
        return (
          <TabPane
            tab={
              <>
                <Icon type="setting" />
                {item.name}
                <Icon
                  type={showMenu ? "up" : "down"}
                  style={{ marginLeft: "10px" }}
                />
              </>
            }
          >
            {showMenu && (
              <Menu>
                {item.subMenuRoutes.map(childItem => {
                  return (
                    <Menu.Item key={childItem.url}>{childItem.name}</Menu.Item>
                  );
                })}
              </Menu>
            )}
          </TabPane>
        );
      })}
    </Tabs>
  );

解决方案

There are a few issues that need to be handled:

1. Assign unique key for every array item in order to render components correctly.

   menuList.map(item => <TabPane key={item.name}></TabPane>);

2. You need to manage every menu's state in order to show menus correctly with the corresponding icon showMenuManager[item.name]:

<Tabs
  onTabClick={e =>
    setShowMenuManager(prev => {
      const newState = { ...initMenuState, [e]: !prev[e] };
      console.log(newState);
      return newState;
    })
  }
/>;

const initMenuState = {
 "Navigation two - Submenu": false,
 "Navigation Three - Submenu": false
};

function TopMenuManager() {
 const [showMenuManager, setShowMenuManager] = useState(initMenuState);
 return (
   <Tabs ... >
     {menuList.map(item => (
       <TabPane
         key={item.name}
         tab={
           <>
             ...
             <Icon
               type={showMenuManager[item.name] ? "up" : "down"}
             />
           </>
         }
       >
         {showMenuManager[item.name] && ...}
       </TabPane>
     ))}
   </Tabs>
 );
}

Check the final example and forked sandbox:

这篇关于如何管理多个导航项状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！