使用 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>
)
}

并将此组件呈现在菜单组件中的子菜单的位置。

如果您需要从菜单组件控制子菜单的打开，则根据您的用例，您当前打开了一个子菜单 ID 数组或单个 ID。