ant-design-pro 动态菜单配置Icon和菜单权限显隐控制

ant-design-pro 修改为动态菜单有很多大佬都给了解决方法，就不多说直接进入怎么配置动态icon！！！！

在配置动态菜单时发现，后台接口返回的路由必须要在config.ts中的routes配置，才能正常显示。这下route都确定好了，route中的icon也是确定的，即使接口数据icon不一样，显示依旧会出问题，会显示icon的文字。

所以我们就要自定义menu的样式了。

首先在BasicLayout.tsx中查看代码，我的是v4版本，用的是proLayout来搭建的菜单框架，github地址：

https://github.com/ant-design/ant-design-pro-layout/blob/HEAD/README.zh-CN.

BasicLayout.tsx中的代码是直接用的defaultDom,如果我们想动态配置icon的话就要修改 proLayout中的

subMenuItemRender和menuItemRender,这两个的具体作用查看git说明

然后修改成下面这样：

修改成自己的样式，这里render只是修改MenuItem中的部分，不用自己加Menu组件.

 

subMenuItemRender={(HeaderViewProps, defaultDom) => {
        return (
          <p>
            <IconFont type={HeaderViewProps.icon} style={{ fontSize: '20px' }} />
            {HeaderViewProps.name}
          </p>
        );
      }}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
          return defaultDom;
        }
        return (
          <Link to={menuItemProps.path}>
            <ul>
              <Menu.Item key={menuItemProps.menuId}>
                <IconFont type={menuItemProps.icon} style={{ fontSize: '20px' }} />
                {menuItemProps.name}
              </Menu.Item>
            </ul>
          </Link>
        );
      }}

我使用的是iconfont，没有使用官方的icon，因为是动态配置icon，如果使用官方的引用，那写的太多了。

推荐一个iconfont库:https://www.iconfont.cn/collections/detail?cid=9402

一般还有控制左侧菜单显隐控制的，我开始用自己数据中的visible在menuItemRender中控制，发现隐藏了它还会有li标签占位！！！会有空白的菜单，这就麻烦了，不能有占位啊！仔细一看proLayout的文档发现了这个：

hideInMenu，我们根据自己的数据来控制这个值的true/false就可以完美解决了，要认真看文档啊！！！

 

怎么在ant-design-pro中使用iconfont，官方文档有：https://ant.design/components/icon-cn/#components-icon-demo-iconfont