如何管理多个导航项状态? [英] How to manage multiple navigation items states?
本文介绍了如何管理多个导航项状态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 antd
组件实现水平菜单.
当点击 nav
项目时,子菜单显示不正确.
const MenuList = [{name: "导航二-子菜单",子菜单路由:[{name: "A- item1",网址:/item1Url1"},{name: "A - item2",网址:/item1Url2"}]},{name: "导航三-子菜单",子菜单路由:[{name: "B- item1",网址:/item1Url1"},{name: "B - item2",网址:/item1Url2"}]}];函数 TextAreaManager() {const [showMenu, setShowMenu] = useState(false);返回 (<Tabs onTabClick={() =>setShowMenu(prev => !prev)}>{MenuList.map(item => {返回 (<标签面板标签={<><图标类型=设置"/>{项目名称}<图标类型={showMenu ?上":下"}style={{ marginLeft: "10px" }}/></>}>{showMenu &&(<菜单>{item.subMenuRoutes.map(childItem => {返回 (<Menu.Item key={childItem.url}>{childItem.name}</Menu.Item>);})}</菜单>)}</TabPane>);})}</Tabs>);
解决方案
有几个问题需要处理:
为每个数组项分配唯一键以正确呈现组件.
menuList.map(item =>
); 您需要管理每个菜单的状态,以便使用相应的图标正确显示菜单
showMenuManager[item.name]
:
setShowMenuManager(prev => {const newState = { ...initMenuState, [e]: !prev[e] };控制台日志(新状态);返回新状态;})}/>;
const initMenuState = {导航二-子菜单":false,导航三-子菜单":false};函数 TopMenuManager() {const [showMenuManager, setShowMenuManager] = useState(initMenuState);返回 (<标签... >{menuList.map(item => (<标签面板键={item.name}标签={<>...<图标type={showMenuManager[item.name] ?上":向下"}/></>}>{showMenuManager[item.name] &&...}</TabPane>))}</Tabs>);}
检查最终的
I'm trying to implement a horizontal menu with antd
components.
When clicking the nav
items the submenu is not showing correctly.
const MenuList = [
{
name: "Navigation two - Submenu",
subMenuRoutes: [
{
name: "A- item1",
url: "/item1Url1"
},
{
name: "A - item2",
url: "/item1Url2"
}
]
},
{
name: "Navigation Three - Submenu",
subMenuRoutes: [
{
name: "B- item1",
url: "/item1Url1"
},
{
name: "B - item2",
url: "/item1Url2"
}
]
}
];
function TextAreaManager() {
const [showMenu, setShowMenu] = useState(false);
return (
<Tabs onTabClick={() => setShowMenu(prev => !prev)}>
{MenuList.map(item => {
return (
<TabPane
tab={
<>
<Icon type="setting" />
{item.name}
<Icon
type={showMenu ? "up" : "down"}
style={{ marginLeft: "10px" }}
/>
</>
}
>
{showMenu && (
<Menu>
{item.subMenuRoutes.map(childItem => {
return (
<Menu.Item key={childItem.url}>{childItem.name}</Menu.Item>
);
})}
</Menu>
)}
</TabPane>
);
})}
</Tabs>
);
解决方案
There are a few issues that need to be handled:
Assign unique key for every array item in order to render components correctly.
menuList.map(item => <TabPane key={item.name}></TabPane>);
You need to manage every menu's state in order to show menus correctly with the corresponding icon
showMenuManager[item.name]
:
<Tabs
onTabClick={e =>
setShowMenuManager(prev => {
const newState = { ...initMenuState, [e]: !prev[e] };
console.log(newState);
return newState;
})
}
/>;
const initMenuState = {
"Navigation two - Submenu": false,
"Navigation Three - Submenu": false
};
function TopMenuManager() {
const [showMenuManager, setShowMenuManager] = useState(initMenuState);
return (
<Tabs ... >
{menuList.map(item => (
<TabPane
key={item.name}
tab={
<>
...
<Icon
type={showMenuManager[item.name] ? "up" : "down"}
/>
</>
}
>
{showMenuManager[item.name] && ...}
</TabPane>
))}
</Tabs>
);
}
Check the final example and forked sandbox:
这篇关于如何管理多个导航项状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文