UMI学习-6 antd Menu使用

1、官方文档请查看
https://ant.design/components/menu-cn/

2、增加SubMenu方法

2.1 定义

const { SubMenu } = Menu;

2.2 增加SubMenu节点

 Option 7

 Option 8

2.3 显示效果

 

 3、将LeftMenu单独抽离成一个组件

新建在Src下新建 components/LeftMenuTree目录，然后新建LeftMenuTree.tsx，内容如下

import {Menu, Icon } from 'antd';
import React from 'react';
const { SubMenu } = Menu;
class LeftMenuTree extends React.Component{
        render() {
            return (
                 "dark" mode="inline" defaultSelectedKeys={['1']}>
            "1">
              "user" />
              nav 1
            
            "2">
              "video-camera" />
              nav 2
            
            "3">
              "upload" />
              nav 3
            
            "sub3" title="Submenu">
            "7">Option 7
            "8">Option 8
            
          
            );
        }
export default LeftMenuTree;

直接将BasicLayout代码修改为

 

 运行效果

 4、下面将treemenu改为动态显示,mock目录下增加一个文件名称menu.ts,内容如下

export default {
  '/api/getmenu': [
    {
      id: 0,
      title: '首页',
      url:'home',
      children: [],
    },
    {
      id: 1,
      title: '权限配置',
      parentid: 0,
      children: [
        {
          id: 2,
          title: '用户管理',
          parentid: 1,
          children: [],
        },
        {
          id: 3,
          title: '角色管理',
          parentid: 1,
          children: [],
        },
      ],
    }
  ]
};

5、访问测试
http://localhost:8000/api/getmenu

6、下面将修改LeftMenuTree组件动态显示menu.网上找不到可以直接运行demo片段代码，自己了研究了一下午，实现了无限级显示menu，代码如下，从mock读数据大家自己完善

import { Menu, Icon } from 'antd';
import React from 'react';
import Item from 'antd/lib/list/Item';
const { SubMenu } = Menu;
class LeftMenuTree extends React.Component {
  state={list:[{"id":0,"title":"首页","url":"home","children":[]},{"id":1,"title":"权限配置","parentid":0,"children":[{"id":2,"title":"用户管理","parentid":1,"children":[]},{"id":3,"title":"角色管理","parentid":1,"children":[]}]}]};
  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.state.list)
    return (
      
      {
        this.showMenus(this.state.list)
      }
      
    );
  }
  //显示菜单列表
  private showMenus(list): React.ReactNode {
    return list.map((item, index) => (
    this.showMenu(item)
    ));
  }
  //显示菜单项
  private showMenu(item: any) {
    if(item.children.length==0)
    return 
      
      {item.title}{item.id}
    ;
    else
    return {
      
        
        {item.title}
      
    }>
    {this.showMenus(item.children)}
    
    
  }
}
export default LeftMenuTree;

7、运行效果如下，大家可以自己增加点击跳转url和get数据方法

 相比之前研究vue版menu算简单了，当时研究vue版antdesign时遇到了问题，最终没有解决，如果有熟悉的同学帮看一下。
https://www.cnblogs.com/zhaogaojian/p/11101909.html