antd 根据 json 数据动态生成 menu

Question

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

Answer 1

用递归可以实现，具体代码如下：

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>

    );

  }

}