react使用antd4来map循环渲染menu.item中icon_antd react map

学习自

https://blog.csdn.net/qq_41522343/article/details/112863231
https://blog.csdn.net/weixin_42661440/article/details/107523392

menuConfig.js

const menuList =[
  {
    title:'首页',
    icon:'PieChartOutlined',
    to:'/home'
  },
  {
    title:'商品',
    icon:'PieChartOutlined',
    to:'/products',
    children:[
      {
        title:'品类管理',
        icon:'PieChartOutlined',
        to:'/category'
      },
      {
        title:'商品管理',
        icon:'PieChartOutlined',
        to:'/product'
      }
    ]
  },
  {
    title:'用户管理',
    icon:'PieChartOutlined',
    to:'/user'
  },
  {
    title:'角色管理',
    icon:'PieChartOutlined',
    to:'/role'
  },
  {
    title:'图形表',
    icon:'PieChartOutlined',
    to:'/charts',
    children:[
      {
        title:'柱形图',
        icon:'PieChartOutlined',
        to:'/charts/bar'
      },
      {
        title:'折线图',
        icon:'PieChartOutlined',
        to:'/charts/line'
      },
      {
        title:'饼图',
        icon:'PieChartOutlined',
        to:'/charts/pie'
      }

    ]
  }
]

export default menuList
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

antd4中<Menu.Item icon={< PieChartOutlined />}>icon属性跟antd3中不一样，是节点属性，可以使用React.createElement方法来创建节点。

导入
import * as Icon from “@ant-design/icons”;
import menuList from ‘…/…/config/menuConfig’；
有三种写法：定义为变量，定义为函数，直接使用

 // 第二种方法使用函数
geticon = (iconname) =>{
  return  React.createElement(Icon[iconname])
  } 
getMenuNodes = (menuList) => {
    return menuList.map(item => {
      // 第一种方法使用变量
    // const icon = React.createElement(Icon[item.icon])
      if(!item.children){
        return (
           {/*第一种方法使用*/}
          {/*<Menu.Item key={item.key} icon={icon}>*/}
          {/*第二种方法使用*/}
          <Menu.Item key={item.key} icon={this.geticon(item.icon)}>
          {/* <Menu.Item key={item.key} icon={icon}> */}
            <Link to={item.key}>
            <span>{item.title}</span>
          </Link>
          </Menu.Item>
        )
      }else{
        return(
          // 第三种方法直接使用React.createElement
          <SubMenu key={item.key} icon={React.createElement(Icon[item.icon])} title={item.title}>
            {this.getMenuNodes(item.children)}
        </SubMenu> 
        )
      }
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

还有一种方法，在config文件里直接导入antd4的icon

import React from 'react'
import {
    HomeOutlined,/*首页*/
    AppstoreOutlined,/*商品*/
    BarsOutlined,/*品类管理*/
    ToolOutlined,/*商品管理*/
    UserOutlined,/*用户管理*/
    SafetyCertificateOutlined,/*角色管理*/
    AreaChartOutlined,/*图形图表*/
    BarChartOutlined,/*柱形图*/
    LineChartOutlined,/*折线图*/
    PieChartOutlined,/*饼图*/
  } from '@ant-design/icons';
 
const menuList = [
    {
        title: '首页',
        key: '/home',
        icon: <HomeOutlined />,
    }, {
        title: '商品',
        key: '/products',
        icon: <AppstoreOutlined />,
        children: [
            {
                title: '品类管理',
                key: '/category',
                icon: <BarsOutlined />
            }, {
                title: '商品管理',
                key: '/product',
                icon: <ToolOutlined />
            }]
    }, {
        title: '用户管理',
        key: '/user',
        icon: <UserOutlined />
    }, {
        title: '角色管理',
        key: '/role',
        icon: <SafetyCertificateOutlined />
    }, {
        title: '图形图表',
        key: '/charts',
        icon: <AreaChartOutlined />,
        children: [
            {
                title: '柱形图',
                key: '/charts/bar',
                icon: <BarChartOutlined />
            }, {
                title: '折线图',
                key: '/charts/line',
                icon: <LineChartOutlined />
            }, {
                title: '饼图',
                key: '/charts/pie',
                icon: <PieChartOutlined />
            }]
    }
]
 
export default menuList
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

然后直接使用

getMenuNodes = (menuList) => {
        return menuList.map(item =>{
            if(!item.children){
                return (
                    <Menu.Item key={item.key} icon={item.icon}>
                        <Link to={item.key}>
                        {item.title}
                        </Link>
                    </Menu.Item>
                )
            }else{
                return (
                    <SubMenu key={item.key} icon={item.icon} title={item.title}>
                        {this.getMenuNodes(item.children)}
                    </SubMenu>
                )
            }
        })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20