我所有的侧边栏菜单在ReactJS中一次打开

Question

我正在尝试用dropdwon创建一个侧边栏菜单

对于单个菜单，它可以正常工作但如果我有多个下拉菜单

当我点击菜单打开子菜单时，所有打开一次。

我从json数组中获取菜单的数据

const SidebarItems = ({ items }) => {
const [open, setOpen] = useState(false)
return (
<div>
{items && items.map((item, index) => {
return (
<div key={index}>
<div>
<li >
<div className="nav-items" onClick={() => setOpen(!open)}>
<span>
<i className="bi-badge-vr" />
{item.title}
</span>
<i className="bi-chevron-down" />
</div>
</li>
</div>
<div className={open ? 'sub-menu sub-menu-open' : "sub-menu"} >
{item.chidren && item.chidren.map((sub_menu, sub_index) => {
return (
<div key={sub_menu}>
<Link to="manager/staff/create">
<span>
<i className="bi-badge-vr" />
{sub_menu.title}
</span>
</Link>
</div>
)
})}
</div>
</div>
)
})}
</div>
)
}

Answer 1

这是因为它们都使用相同的状态。将项目移动到它自己的组件中，这样我就可以保持它自己的状态:

const Item = ({ item }) => {
const [open, setOpen] = useState(false);
return <Your item code here />;
};

items.map((item, index) => {
return <Item item={item} key={index} />;
});