antd 根据 json 数据动态生成 menu

Question

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

json 数据范例如下：

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

Answer 1

用递归可以实现，具体代码如下：class Sider extends Component {&nbsp; constructor() {&nbsp; &nbsp; super()&nbsp; }&nbsp; recursion(dataSource) {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; dataSource.map((menu, index) => {&nbsp; &nbsp; &nbsp; &nbsp; if (menu.children) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SubMenu key={menu.key} title={menu.title}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.recursion(menu.children)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </SubMenu>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (<Menu.Item key={menu.key}>{menu.title}</Menu.Item>)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; )&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <Menu&nbsp; &nbsp; &nbsp; &nbsp; mode="inline"&nbsp; &nbsp; &nbsp; &nbsp; style={{ width: 240 }}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; this.recursion(data)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </Menu>&nbsp; &nbsp; );&nbsp; }}