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。

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

1 个答案: