Question

我有一个导航菜单，我想在我单击的列表项上运行一个功能，以打开一个子菜单。现在发生的事情是我单击了一个项目并显示了所有子菜单。在使每个子菜单使用单独的值之前，我使它工作了，我想知道是否可以使它使用单个功能而不是复制和粘贴相同的功能2更多次。有什么建议吗？这是我的代码

File "/home/teflon/.local/lib/python2.7/site-packages/selenium/webdriver/support/wait.py", line 80, in until
    raise TimeoutException(message, screen, stacktrace)
selenium.common.exceptions.TimeoutException: Message:

Answer 1

为了对每个函数重用相同的功能，您必须修改状态存储的内容。 menu是布尔值，因此它只能具有两个值之一。但是，如果为每个子菜单存储唯一的标识符，则可以基于此子菜单打开子菜单进行更改。例如，如果每个子菜单都有一个ID，并且您已将该ID存储在状态中，则可以将该ID与该子菜单的ID进行比较，并通过true / false来确定其是否打开。

您可以对此组件进行一些其他改进，以减少重复性。有很多重复可以简化。

import React from "react";
import { useImmer } from "use-immer";
import Submenu from "./Submenu";

const menuItems = [
  {
    id: 'menu1',
    subfirst: "Item 1",
    subsecond: "Item 2",
    subthird: "Meat 3",
  },
  {
    id: 'menu2',
    subfirst: "Item 1",
    subsecond: "Item 2",
    subthird: "Item 3",
  },
  {
    id: 'menu3',
    subfirst: "Item 1",
    subsecond: "Item 2",
    subthird: "Item 3",
  },
];

function Navbar() {
  const [state, setState] = useImmer({ openMenuId: undefined });

  function openSubMenu(menuId) {
    e.preventDefault();
    setState(draft => {
      draft.openMenuId = menuId;
    });
  }

  return (
    <ul style={{ listStyle: 'none' }}>
      {menuItems.map((menuItem, index) => (
        <li className={`navbar-main__item navbar-main__item--${index}`}>
          <a onClick={() => openSubMenu(menuItem.id)} href="#" className="navbar-main__link">
            <span>List item {index}</span>
            <svg
              className={`navbar-main__icon  navbar-main__icon--rotate${state.openMenuId === menuItem.id ? '-down' : ''}`}
            >
              <use href="img/sprite.svg#icon-chevron-thin-down" />
            </svg>
          </a>
          <Submenu
            subfirst={menuItem.subfirst}
            subsecond={menuItem.subsecond}
            subthird={menuItem.subthird}
            isOpen={state.openMenuId === menuItem.id}
          />
        </li>
      ))}
    </ul>
  );
}

export default Navbar;

尽管那只是一个快速的过去。在这种情况下，useImmer可能是过大的，除非您计划向该状态添加更多内容。

导航菜单与反应

1 个答案: