react map 双重循环 嵌套循环

6 篇文章 0 订阅

实现效果:

如图,数据是模拟后台输出的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 (
          <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;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值