• Ant Design Pro 4.0动态菜单图标显示

    • 2020-03-18 10:00
    • 字数 3,023
    • 阅读 1,224
    在使用Ant Design Pro 4.0进行React开发时,可通过设置 icon 配置菜单图标,但这在 antd@4 中将无法得到支持,官方也提供了相应的插件来保留此功能。这在前端route.ts生成的静态菜单是有效的,但动态生成菜单时,发现并没有显示图标。经过调试,发现umi-plugin-antd-icon-config插件只在应用初始时生效。依葫芦画瓢,通过复制粘贴umi-plugin-antd-icon-config的代码到BasicLayout.tsx,菜单图标显示问题得到完美解决。

    注:官方出示例代码,请移步:从服务器加载-menu-并且使用-icon

    1、引入 antd@4 图标

    import * as allIcons from '@ant-design/icons/es';

    2、处理菜单数据的函数

    const toHump = (name: string) =>
      name.replace(/-(\w)/g, (all: string, letter: any) => letter.toUpperCase());
    const formatter = (data: any[]) => {
      data.forEach(item => {
        if (item.icon) {
          const { icon } = item;
          const v4IconName = toHump(icon.replace(icon[0], icon[0].toUpperCase()));
          const NewIcon = allIcons[icon] || allIcons[''.concat(v4IconName, 'Outlined')];
          if (NewIcon) {
            try {
              // eslint-disable-next-line no-param-reassign
              item.icon = React.createElement(NewIcon);
            } catch (error) {
              console.log(error);
            }
          }
        }
    
        if (item.routes || item.children) {
          const children = formatter(item.routes || item.children); // Reduce memory usage
    
          item.children = children;
        }
      });
      return data;
    };
    
    const patchRoutes = (routes: any[]): any => formatter(routes);
    参考文档:迁移 antd@4 指南

    3、处理菜单数据

      const [menuData, setMenuData] = useState([]);
      useEffect(() => {
        if (dispatch) {
          dispatch({
            type: 'user/fetchCurrent',
          });
        }
    
        queryMenu().then(data => {
          setMenuData(patchRoutes(data || []));
        });
      }, []);
    参考文档:Ant Design Pro 4.0从服务器请求菜单

    4、菜单数据样例

    // 代码中会兼容本地 service mock 以及部署站点的静态数据
    export default {
      // 支持值为 Object 和 Array
      'GET /api/menu': [
        {
          path: '/',
          redirect: '/welcome',
        },
        {
          path: '/welcome',
          name: 'welcome',
          icon: 'smile',
        },
        {
          path: '/admin',
          name: 'admin',
          icon: 'crown',
          routes: [
            {
              path: '/admin/sub-page',
              name: 'sub-page',
              icon: 'smile',
            },
          ],
        },
        {
          name: 'list.table-list',
          icon: 'table',
          path: '/list',
        },
      ],
    };
    
back_to_top