版权声明: https://blog.csdn.net/weixin_41826907/article/details/80532273
享元模式:运用共享技术有效的支持大量的细粒度的对象,避免对象间拥有相同内容过多造成多余的开销
在写管理端时,一般会做权限控制,这时我们就要根据后台返回的权限树(或者相应数组)生成对应的导航菜单
在这里我们通过享元模式来基于react和antd来根据权限树来生成对应的菜单
MenuItem元单位和SubMenu元单位:
const renderMenuItem = ({ path, name, icon, ...props }) =>
<Menu.Item
key={name}
{...props}
>
<Link to={`/${path}`}>
{icon && <Icon type={icon} />}
<span className="nav-text">{name}</span>
</Link>
</Menu.Item>;
const renderSubMenu =
({name, submenu, icon, ...props }) =>
<Menu.SubMenu
key={name}
title={
<span>
{icon && <Icon type={icon} />}
<span className="nav-text">{name}</span>
</span>
}
{...props}
>
{submenu && submenu.map(
item => (item.submenu && item.submenu.length)
?
renderSubMenu(item)
:
renderMenuItem(item))}
</Menu.SubMenu>;
然后根据menuItem 和 submenu来生成Menu组件
export default ({ menus, ...props }) => <Menu {...props}>
{menus && menus.map(
item => (item.submenu && item.submenu.length) ?
renderSubMenu(item) : renderMenuItem(item)
)}
</Menu>;
这样,我们生成导航只需要传入导航数据:
<SiderMenu
menus={data}
theme="dark"
mode="inline"
defaultOpenKeys={['Infomation']}
defaultSelectedKeys={['HospitalDynamic']} />
生成menu所以需要的data:
const data = [
{
name: '资讯信息',
icon: 'database',
submenu: [
{
name: '医院动态',
path: 'HospitalInfo'
},
{
name: '医院公告',
path: 'HospitalDynamic'
},
{
name: '媒体报告',
path: 'MediaReport'
},
{
name: '学术动态',
path: 'Learning'
},
{
name: '党工团建设',
path: 'PartyBuild'
}
]
},
{
name: '新媒体交互',
icon: 'appstore',
submenu: [
{
name: '微信资讯',
path: 'WechatInfo'
}
]
},
{
name: '专题视频',
icon: 'video-camera',
path: 'ThemeVideo'
},
{
name: '科室导航',
icon: 'global',
submenu: [
{
name: '重点科室',
submenu: [
{
name: '国家临床重点专科',
path: 'KeyDepart/1' // 根据后面的id去获取对应的科室列表
},
{
name: '广东盛重点专科',
path: 'KeyDepart/2'
}
]
}
]
}
效果: