react map 双重循环 嵌套循环
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 (
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
onClick={this.handleClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
{
list.map(function(item,index){
return (
{
item.menuItem.map(function(item1,number){
return (
);
})
}
);
}
)
}
);
}
}
export default Slider;