React在Ant-Design菜单栏使用动态引入路由菜单语法

1、方式一

// 动态显示路由菜单
// 根据指定menu 数据数组生成<Item></Item>和<Submenu></Submenu>的数组
getMenuNodes = (menuList) => {
  return menuList.map(item => {
    if (item.children) {
      return
       <Menu.Item={item.key}>
        <Link to={item.key}>
        <Icon type={item.icon}/>
        <span>{item.title}</span>
        </Link>
      </Menu.Item>
    } 
    return ( //有下一级菜单

      <SubMeun>

      </SubMeun>
    )
  })
}

           

2、方式二

// reduce 方式
getMenuNodes2 = (menuList) => {
  return menuList.reduce((pre, item) => {
    // 
    if (!item.children) {
      pre.push(
        <Menu.Item={item.key}>
        <Link to={item.key}>
        <Icon type={item.icon}/>
        <span>{item.title}</span>
        </Link>
      </Menu.Item>
      )
    } else {
      pre.push {
        <SubMeun>
          <Menu.item={item.key}/>
          
        </SubMeun>
      }
    }
  }
  )
}