antd4.x中动态创建icon

menuConfig

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

创建并渲染

getMenuList = (menuList) => {
   return  menuList.map(v => {
      if (!v.children) {
        //antd4中动态创建icon
        const icon = React.createElement(
          Icon[v.icon],
          {
            style:{ fontSize: '16px'}
          }
        )
        return (
        //渲染
          <Menu.Item key={v.to} icon={icon}>
            <Link to={v.to}>
              {v.title}
            </Link>
          </Menu.Item>
        )
      }else{
         const icon= React.createElement(
            Icon[v.icon],
            {
              style:{ fontSize: '16px'}
            }
          )
        return (
          <SubMenu key={v.to} title={v.title} icon={icon}>

            {
              this.getMenuList(v.children)
            }
          </SubMenu>
        )
      }
    })
  }