custom类antd menu

工作需要封装了一下如下图的menu，实现比较简单，使用也比较简单。比较来说没有antd menu好用，大家看个思路自定义自己的menu；

技术栈 react + umi + ice-store + hooks + ts + less + antd

index.tsx如下

/*
 * @文件描述:Menu菜单
 * 参数 menus数组 见接口
 * @作者: 于效仟
 * @Date: 2019-11-27 17:12:01
 * @LastEditors: 于效仟
 * @LastEditTime: 2019-11-27 17:34:19
 */
import React, { useState } from 'react';
import { Dropdown, Menu } from 'antd';
import styles from './index.module.less';
import stores from '@/stores';
import { HomeStore } from '@/interfaces/home.store';
import classnames from 'classnames';
import router from 'umi/router';
import Link from 'umi/link';

interface MenuProps {
  // 菜单文本
  text: string;
  // 菜单链接
  url?: string;
  // 子菜单数组同当前
  subMenus?: MenuProps[];
}

interface MenusProps {
  menus: MenuProps[];
}

export default ({ menus }: MenusProps) => {
  const [menuNum, setMenuNum] = useState();
  const home = stores.useStore('homeStore') as HomeStore;
  const { tenantCode } = home;

  return (
    <div className={styles.menu}>
      {menus.map((menu, index) =>
        menu.subMenus ? (
          <Dropdown
            key={index}
            placement="bottomCenter"
            overlayClassName={styles.dropdownMenu}
            overlay={
              <Menu>
                {menu.subMenus &&
                  menu.subMenus.map((subMenu, indexDrop) => (
                    <Menu.Item
                      key={indexDrop}
                      onClick={() => {
                        setMenuNum(index);
                        router.push(`${subMenu.url}?tenantcode=${tenantCode}`);
                      }}
                    >
                      <span style={{ fontSize: 18 }}>{subMenu.text}</span>
                    </Menu.Item>
                  ))}
              </Menu>
            }
          >
            <div
              key={index}
              className={classnames(styles.menuItem, index === menuNum && styles.active)}
            >
              {menu.text}
            </div>
          </Dropdown>
        ) : (
          <Link
            key={index}
            className={classnames(styles.menuItem, index === menuNum && styles.active)}
            to={`${menu.url}?tenantcode=${tenantCode}`}
            onClick={() => setMenuNum(index)}
          >
            {menu.text}
          </Link>
        ),
      )}
    </div>
  );
};

index.module.less

.menu {
  width: 1920px;
  height: 50px;
  background: rgba(39, 114, 254, 1);
  line-height: 50px;
  padding-left: 389px;

  .menuItem {
    height: 25px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 25px;
    margin-right: 54px;
    display: inline-block;

    &:hover,
    &.active {
      color: rgba(255, 255, 255, 1);
    }
  }

  .active {
    height: 25px;
    font-size: 18px;
    line-height: 25px;
    margin-right: 54px;
    color: #fff;
  }
}

.dropdownMenu {
  position: absolute;
  top: 130px !important;
  left: -2px;

  :global {
    .ant-dropdown-menu-item {
      width: 152px;
      height: 42px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

仅供学习与参考，没有过多去封装。