reactjs - 使用 map() 创建一个带有子菜单的导航，其中 className 处于活动状态并使用 cssflex 悬停

Question

为什么我看不到这个...

我正在尝试使用 map() 创建导航菜单。

有些项目会有一个子菜单，有些则没有，但为了我的生活，我似乎无法让它们一起工作。

简而言之，当用户跳过“显示菜单”按钮时，我想显示菜单，即按钮 1、2、3、4。

当您将鼠标悬停在按钮上时，如果单击按钮，背景将通过添加 className 'hovered' 来更改颜色，它将添加 className 'active' 并更改另一种颜色

如果按钮有一个子菜单，当你将鼠标悬停在它上面时，我想显示子菜单。我想使用 css flex 和 react 钩子来做到这一点。

我添加了一张图片来尝试更好地解释它。

看起来很简单吧...

也许是因为我正在使用 React，或者是因为我没有直接思考，但这是我的代码。

import stories from "../data/Stories.json";
import styled from "styled-components";
import { useState } from "react";
const classNames = require("classnames");

const menuItems = [
  {
    name: "1",
    icon: "fa fa-bars",
    content: "Story Here",
    subMenus: [
      { name: "1-1", icon: "fa fa-bars", content: "Story Here" },
      { name: "1-2", icon: "fa fa-bars", content: "Story Here" },
      { name: "1-3", icon: "fa fa-bars", content: "Story Here" },
    ],
  },
  {
    name: "2",
    icon: "fa fa-bars",
    content: "Story Here",
    subMenus: [
      { name: "2-1", icon: "fa fa-bars", content: "Story Here" },
      { name: "2-2", icon: "fa fa-bars", content: "Story Here" },
      { name: "2-3", icon: "fa fa-bars", content: "Story Here" },
    ],
  },
  {
    name: "3",
    icon: "fa fa-bars",
    content: "Story Here",
  },
];

const Navbar = () => {
  const [hoveredStateonMenuItem, setHoveredStateonMenuItem] = useState("");
  const [hoveredStateonSubMenuItem, setHoveredStateonSubMenuItem] = useState(
    ""
  );

  console.log(hoveredStateonMenuItem);

  return (
    <Container>
      <Menu>
        {menuItems.map(function (menuItem, i1) {
          if (menuItem.subMenus != undefined) {
            return (
              <SubMenu key={i1}>
                <MenuButton
                  onMouseEnter={() => setHoveredStateonMenuItem(i1)}
                  onMouseLeave={() => setHoveredStateonMenuItem(!i1)}
                  className={classNames({
                    // active: navButtonClicked === name && activeButton === true, //If you just want to make the clicked button have the class active
                    // active: activeButton === true, //If you want to make all buttons active
                    hovered: hoveredStateonMenuItem === i1,
                  })}
                >
                  {i1}
                </MenuButton>
                {menuItem.subMenus.map(function (subMenu, i2) {
                  return (
                    <MenuButton
                      key={i2}
                      onMouseEnter={() => setHoveredStateonMenuItem(i1)}
                      onMouseLeave={() => setHoveredStateonMenuItem(!i1)}
                      className={classNames({
                        // active: navButtonClicked === name && activeButton === true, //If you just want to make the clicked button have the class active
                        // active: activeButton === true, //If you want to make all buttons active
                        hovered: hoveredStateonMenuItem === i1,
                      })}
                    >
                      {i1 + "-" + i2}
                    </MenuButton>
                  );
                })}
              </SubMenu>
            );
          } else {
            return (
              <MenuButton
                key={i1}
                onMouseEnter={() => setHoveredStateonMenuItem(i1)}
                onMouseLeave={() => setHoveredStateonMenuItem(!i1)}
                className={classNames({
                  // active: navButtonClicked === name && activeButton === true, //If you just want to make the clicked button have the class active
                  // active: activeButton === true, //If you want to make all buttons active
                  hovered: hoveredStateonMenuItem === i1,
                })}
              >
                {i1}
              </MenuButton>
            );
          }
        })}
      </Menu>
    </Container>
  );
};

const Container = styled.div`
  background: green;
  height: 50vh;
`;
const Hamburger = styled.div``;
const Menu = styled.ul``;
const SubMenu = styled.ul`
  & > li:not(:first-child) {
    display: none;
  }
`;
const MenuButton = styled.li`
  background: red;
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 100%;
  line-height: 60px;
  &.hovered {
    display: block !important;
  }
`;

const Icon = styled.div``;
const Text = styled.div``;

export default Navbar;

我需要一些帮助，我知道我可以解决这个问题，但这让我发疯。

标签： reactjsflexboxreact-hooks