AntDesign(React)學習-6 Menu展示數據

1、官方文檔請查看
https://ant.design/components/menu-cn/
antPro自帶的菜單功能很強大，但是太復雜了，感覺大部分功能都用不上，下面實現一個簡單從后台動態獲取菜單的功能。

2、增加SubMenu方法

2.1 定義

const { SubMenu } = Menu;

2.2 增加SubMenu節點

<SubMenu key="sub3" title="Submenu">

 <Menu.Item key="7">Option 7</Menu.Item>

 <Menu.Item key="8">Option 8</Menu.Item>

</SubMenu>

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 (
                 <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="user" />
              <span>nav 1</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="video-camera" />
              <span>nav 2</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="upload" />
              <span>nav 3</span>
            </Menu.Item>
            <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
            </SubMenu>
          </Menu>
            );
        }
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 (
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
      {
        this.showMenus(this.state.list)
      }
      </Menu>
    );
  }
  //顯示菜單列表
  private showMenus(list): React.ReactNode {
    return list.map((item, index) => (
    this.showMenu(item)
    ));
  }
  //顯示菜單項
  private showMenu(item: any) {
    if(item.children.length==0)
    return <Menu.Item key={item.id}>
      <Icon type="file" />
      <span>{item.title}{item.id}</span>
    </Menu.Item>;
    else
    return <SubMenu key={item.id} title={
      <span>
        <Icon type="folder" />
        <span>{item.title}</span>
      </span>
    }>
    {this.showMenus(item.children)}
    </SubMenu>
    
  }
}
export default LeftMenuTree;

7、運行效果如下，大家可以自己增加點擊跳轉url和get數據方法，后面將更深入的了解這個組件。