javascript - 子菜单不适用于 ReactJs 中的多个项目？

Question

我的子菜单仅在存在单个项目 li 标记时才起作用，但如果我增加 li 标记的数量，则会停止工作:

我的代码:-

import React, { useState } from "react";
import { Link } from "react-router-dom";

const Home = (props) => {
  const [subMenuOpen, setSubMenuOpen] = useState(false);
  return (
    <>
        <ul className="submenu">
        <li>
          <Link to="/">
            <div
              onClick={() => setSubMenuOpen(!subMenuOpen)}
            >
              <span>test</span>
            </div>
          </Link>

          <ul class={`sub-menu ${subMenuOpen ? "is-open" : ""}`}>
            <li className="menu-item">Sub-Item 1</li>
            <li className="menu-item">Sub-Item 2</li>
            <li className="menu-item">Sub-Item 3</li>
          </ul>
        </li>
        <li>
          <Link to="/">
            <div
              onClick={() => setSubMenuOpen(!subMenuOpen)}
            >
              <span>test</span>
            </div>
          </Link>

          <ul class={`sub-menu ${subMenuOpen ? "is-open" : ""}`}>
            <li className="menu-item">Sub-Item 1</li>
            <li className="menu-item">Sub-Item 2</li>
            <li className="menu-item">Sub-Item 3</li>
          </ul>
        </li>
        </ul>

 </>
  );
};

export default Home;

.sub-menu { display: none;}
.sub-menu.is-open { display:block;}

我该如何解决这个问题？

Answer 1

因为您有多个子菜单，所以您需要跟踪哪个子菜单打开，而您无法使用单个 bool 值来做到这一点。

如果您只有 1 级子菜单项，并且最多可以打开其中一个，则可以使用数字: -1 -> 没有打开子项目， 0 -> 第一个项目已打开，等等，如下所示:

• const [subMenuOpen, setSubMenuOpen] = useState(-1);
• 第一个分区:<div onClick={() => setSubMenuOpen(0)}>
• 第二个div:<div onClick={() => setSubMenuOpen(1)}>
  (等)
• 第一个 ul:<ul class={`sub-menu ${subMenuOpen === 0 ? "is-open" : ""}`}>
• 第二个 ul:<ul class={`sub-menu ${subMenuOpen === 1 ? "is-open" : ""}`}>
  (等)
• 您可能还需要提供一些清除菜单的内容，因此单击菜单外部将运行 setSubMenuOpen(-1) .

要获得切换行为，您可以使用如下辅助函数:

• 辅助函数:const toggleMenu = (x) => setSubMenuOpen(subMenuOpen === x ? -1 : x)
• 第一个分区:<div onClick={() => toggleMenu(0)}>
• 第二个div:<div onClick={() => toggleMenu(1)}>

---

如果您计划有多个级别的菜单项，那么树状数据结构会更合适，也许既可以定义菜单又可以跟踪打开的菜单(子)(子)(子)项目。