使用 React Hooks 显示和隐藏子菜单

Question

我正在尝试使用 React Hooks 重做我的菜单，这是我最近的尝试。

我遇到的唯一问题是，当我单击sub-menu-click 时，所有子菜单都会打开。

我怎样才能使它在单击父项（即第 1 项）时仅打开子项？

谢谢。

import React, { useState } from 'react';

export default () => {
    const [menuOpen, setMenuOpen] = useState(false);
    const [subMenuOpen, setSubMenuOpen] = useState(false);
    const toggleClassName = menuOpen ? 'is-open' : '';

    const data = useStaticQuery(graphql`
        query {
            site {
                siteMetadata {
                    title
                }
            }
        }
    `);
    return (
        <Layout>
            <Menu>
                <div class="menu-left">
                    <Link to="/">{data.site.siteMetadata.title}</Link>
                </div>
                <Hamburger
                    className={toggleClassName}
                    onClick={() => setMenuOpen(!menuOpen)}
                >
                    <span></span>
                    <span></span>
                    <span></span>
                </Hamburger>
                <div class="menu-right">
                    <ul className={toggleClassName}>
                        <li class="menu-item has-children">
                            <Link to="/">
                                Item 1
                            </Link>
                            <div
                                class={`sub-menu-click`}
                                onClick={() => setSubMenuOpen(!subMenuOpen)}
                            >
                                <span></span>
                            </div>
                            <ul
                                class={`sub-menu && ${
                                    subMenuOpen ? 'is-open' : ''
                                }`}
                            >
                                <li class="menu-item">Sub-Item 1</li>
                                <li class="menu-item">Sub-Item 2</li>
                                <li class="menu-item">Sub-Item 3</li>
                            </ul>
                        </li>
                        <li class="menu-item has-children">
                            <Link to="/">
                                Item 2
                            </Link>
                            <div
                                class={`sub-menu-click`}
                                onClick={() => setSubMenuOpen(!subMenuOpen)}
                            >
                                <span
                                    class={`${subMenuOpen ? 'is-open' : ''}`}
                                ></span>
                            </div>
                            <ul
                                class={`sub-menu && ${
                                    subMenuOpen ? 'is-open' : ''
                                }`}
                            >
                                <li class="menu-item">Sub-Item 1</li>
                                <li class="menu-item">Sub-Item 2</li>
                                <li class="menu-item">Sub-Item 3</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </Menu>
        </Layout>
    );
};

Answer 1

最简单的解决方案是将SubMenu 移动到不同的组件并让它拥有自己的状态。

const SubMenu = () => {
  const [subMenuOpen, setSubMenuOpen] = useState(false);
  return (
    <li class="menu-item has-children">
     <Link to="/">
          Item 1
     </Link>
     <div
        class={`sub-menu-click`}
        onClick={() => setSubMenuOpen(!subMenuOpen)}
      >
          <span></span>
      </div>
      <ul
          class={`sub-menu && ${
              subMenuOpen ? 'is-open' : ''
          }`}
      >
          <li class="menu-item">Sub-Item 1</li>
          <li class="menu-item">Sub-Item 2</li>
          <li class="menu-item">Sub-Item 3</li>
      </ul>
  </li>
  )
}

并在 Menu 组件中为 SubMenu 渲染该组件。

如果您需要从 Menu 组件控制 SubMenu 的打开，您有一个当前打开的 subMenuId 数组或根据您的用例的单个 ID。