React 简单的动态菜单

import React from 'react';
import ReactDom from 'react-dom';
import {Slider, Button, Menu, Icon} from 'antd';
import 'antd/lib/slider/style';
import 'antd/lib/button/style';
import 'antd/lib/menu/style';
import 'antd/lib/icon/style';
const SubMenu = Menu.SubMenu;

class Sider extends React.Component {

    handleClick = (e) => {
        console.log('click ', e);
    };

    render() {
        const menutar = [
            {
                'id': 'id1',
                'name': 'user',
                'vvl': ['a', 'b', 'c', 'd']
            },
            {
                'id': 'id2',
                'name': 'password',
                'vvl': ['x', 'y', 'p', 'n']
            },
            {
                'id': 'id3',
                'name': 'shadow',
                'vvl': ['t', 'w', 'u', 'k']
            }
        ];

        return (
            <div>
                <Menu onClick={this.handleClick} style={{width: 240}} mode="inline">
                    {
                        menutar.map(function (item) {
                                return (<SubMenu key={item.id}
                                                 title={<span><Icon type="appstore"/><span>{item.name}</span></span>}>
                                    {item.vvl.map((vl)=>(
                                        <Menu.Item key={item.vvl.indexOf(vl)}>{vl}</Menu.Item>
                                    ))}
                                </SubMenu>)
                            }
                        )
                    }
                </Menu>
            </div>
        );
    }
}

ReactDom.render(<Sider />, document.getElementById('root'));