React 簡單的動態菜單

 1 import React from 'react';
 2 import ReactDom from 'react-dom';
 3 import {Slider, Button, Menu, Icon} from 'antd';
 4 import 'antd/lib/slider/style';
 5 import 'antd/lib/button/style';
 6 import 'antd/lib/menu/style';
 7 import 'antd/lib/icon/style';
 8 const SubMenu = Menu.SubMenu;
 9 
10 class Sider extends React.Component {
11 
12     handleClick = (e) => {
13         console.log('click ', e);
14     };
15 
16     render() {
17         const menutar = [
18             {
19                 'id': 'id1',
20                 'name': 'user',
21                 'vvl': ['a', 'b', 'c', 'd']
22             },
23             {
24                 'id': 'id2',
25                 'name': 'password',
26                 'vvl': ['x', 'y', 'p', 'n']
27             },
28             {
29                 'id': 'id3',
30                 'name': 'shadow',
31                 'vvl': ['t', 'w', 'u', 'k']
32             }
33         ];
34 
35         return (
36             <div>
37                 <Menu onClick={this.handleClick} style={{width: 240}} mode="inline">
38                     {
39                         menutar.map(function (item) {
40                                 return (<SubMenu key={item.id}
41                                                  title={<span><Icon type="appstore"/><span>{item.name}</span></span>}>
42                                     {item.vvl.map((vl)=>(
43                                         <Menu.Item key={item.vvl.indexOf(vl)}>{vl}</Menu.Item>
44                                     ))}
45                                 </SubMenu>)
46                             }
47                         )
48                     }
49                 </Menu>
50             </div>
51         );
52     }
53 }
54 
55 ReactDom.render(<Sider />, document.getElementById('root'));