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 (
<div>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
{
list.map(function(item,index){
return (
<SubMenu key={index} title={<span>{item.item}</span>}>
{
item.menuItem.map(function(item1,number){
return (
<Menu.Item key={number} id={number}>{item1}</Menu.Item>
);
})
}
</SubMenu>
);
}
)
}
</Menu>
</div>
);
}
}
export default Slider;
posted on 2021-06-03 15:41 ranyonsue 阅读(1452) 评论(0) 编辑 收藏 举报