结合享元模式思想写一个导航

版权声明： 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'
          }
        ]
      }
    ]
  }

效果：