我有一个左侧菜单,当您单击某个元素时,将显示该元素的子菜单。但是对于我的实际代码,当单击某个元素时,会出现我的所有子菜单。我知道我的方法不对,但我不知道该怎么做:(我的示例代码:import { useState } from 'react'export default function Menu(){ const [visibleSubCategorie, setVisibleSubCategorie] = useState(false) const Menu = [{ name: 'Homme', link : '/homme-fr', subCategory: false }, { name: 'Femme', link : '/femme-fr', subCategory: [{ name: 'haut', link : '/femme-haut-fr' },{ name: 'bas', link : '/femme-bas-fr' }] },{ name: 'Enfant', link : '/enfant-fr', subCategory: [{ name: 'haut', link : '/enfant-haut-fr' },{ name: 'bas', link : '/enfant-bas-fr' }] }] console.log("Menu -> Menu", Menu) return( <> {Menu.map(item=> <div> {item.subCategory ? <> <button type="button" onClick={() => setVisibleSubCategorie(!visibleSubCategorie)}>{item.name}</button> {visibleSubCategorie && item.subCategory.map(subCategorys=> <> <p>{subCategorys.name}</p> </> )} </> : <a href={item.link}>{item.name}</a> } </div> )} </>)}``示例:当我单击按钮“Femme”以查看femme的子类别时,就像我也单击了“Enfant”按钮一样。我可以创建一个组合体,并使使用状态“const [visibleSubCategorie, setVisibleSubCategorie] = useState(false)”,并且这个组合体在映射内,但我知道存在另一种方法。
2 回答

天涯尽头无女友
TA贡献1831条经验 获得超9个赞
您正在使用同一条状态来控制所有子类别。一种可能的解决方案是将State用作每个子类别的字符串值数组。
const [visibleSubCategorie, setVisibleSubCategorie] = useState([])
setVisibleSubCategorie([...visibleSubCategorie, subCategorys.name])
然后检查数组中是否存在该名称,以了解是否应显示子类别。
{visibleSubCategorie.includes(subCategorys.name) && item.subCategory.map(subCategorys=>
然后,您必须在关闭时从数组中删除该项目。

ITMISS
TA贡献1871条经验 获得超8个赞
您可以使用类似于@Kyler建议的方法解决此问题。
我建议使用HOC,如下所示:
const setOpen = (setOpen, opened) => () => setOpen(!opened);
然后在你的JSX中:
onClick={setOpen(setVisibleSubCategorie, visibleSubCategorie)}
请注意,为了使此功能正常工作,您必须为每个部分提供状态。
添加回答
举报
0/150
提交
取消