web|react map 双重循环嵌套循环 web|react

实现效果：
如图，数据是模拟后台输出的json，通过双重循环将数据放到侧边栏中

文章图片

json数据如下

{ "items":[ { "item": "BeJson", "menuItem": ["menu1","menu2","menu3"] }, { "item": "mary", "menuItem": ["menu1","menu2","menu3"] }, { "item": "even", "menuItem": ["menu1","menu2","menu3"] } ] }

侧边栏组件如下

import React, { Component } from 'react'; import { Menu, Icon,Switch } from 'antd'; import data from './slidedata.json'; const list = data.items; const SubMenu = Menu.SubMenu; class Slider extends Component{ state = { theme: 'dark', current: '0', }changeTheme = (value) => { this.setState({ theme: value ? 'dark' : 'light', }); }handleClick = (e) => { console.log('click ', e); this.setState({ current: e.key, }); }render() { return ( { list.map(function(item,index){ return ( {item.item}}> { item.menuItem.map(function(item1,number){ return ( {item1} ); }) }); } ) } ); } } export default Slider;

【web|react map 双重循环嵌套循环】