javascript - antd 根据 json 数据动态生成 menu

问题描述

问 题

如题：根据json数据动态生成 menu,json数据的深度不固定，所以menu不能直接固定死嵌套几层map循环，其中children为submenu，谢谢。

json 数据范例如下：

const data = [
  {
    "key": 1,
    "icon": "appstore",
    "title": "软件测试科",
    "url": "",
    "children": [
      {
        "key": 4,
        "title": "广电组",
        "url": "",
        "children": [
          {
            "key": 8,
            "title": "客制化",
            "url": "",
            "children": [
              {
                "key": 19,
                "title": "版本测试",
                "url": ""
              }
            ]
          }, {
            "key": 9,
            "title": "客供",
            "url": ""
          }
        ]
      }, {
        "key": 5,
        "title": "光通组",
        "url": "",
        "children": [
          {
              "key": 16,
              "text": "版本测试",
              "title": "",
              "url": ""
          }
        ]
      }
    ]
  }, {
    "key": 2,
    "icon": "setting",
    "title": "硬件测试科",
    "url": ""
  }, {
    "key": 3,
    "icon": "mail",
    "title": "EMC测试科",
    "url": ""
  }
]

根据json范例数据生成的menu如下

解决方案

谢谢@yesmeck的建议，用递归可以实现，具体代码如下：

class Sider extends Component {
  constructor() {
    super()
  }

  recursion(dataSource) {
    return (
      dataSource.map((menu, index) => {
        if (menu.children) {
          return (
            <SubMenu key={menu.key} title={menu.title}>
              {this.recursion(menu.children)}
            </SubMenu>
          )
        } else {
          return (<Menu.Item key={menu.key}>{menu.title}</Menu.Item>)
        }
      })
    )
  }

  render() {
    return (
      <Menu
        mode="inline"
        style={{ width: 240 }}
      >
      {
        this.recursion(data)
      }
      </Menu>
    );
  }
}

这篇关于javascript - antd 根据 json 数据动态生成 menu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！