学习react，首选UI框架，想要实现什么样的效果，都可以去找一下，无需自己写太多的代码，开箱即用，瞬间感觉自己是一个没得感情的复制黏贴程序员，api工程师...
但是为了能够在项目中发挥更好的作用，平时没事的时候还是多熟悉熟悉各种文档吧，毕竟熟能生巧这句千古名词也不是随意说说的，每一次温故的时候总会发现令我眼前一亮的东西....
话不多说，继续记录....
1：首先生成一个空组件模板
import React, { Component } from 'react'; class Nav extends Component { constructor(props) { super(props); //react定义数据 this.state = { } } render() { return ( <div> <h2>我是导航菜单界面</h2> </div> ) } } export default Nav;
2：在空组件里面引入导航菜单相关要用到的组件
import { Menu, Icon } from 'antd'; const { SubMenu } = Menu;
3：参考antd文档：关于Menu导航菜单的相关组件，重要的话说三遍...
4： render()内容
从文档里面找到相关内容，ctrl c + ctrl v
5：参考代码如下
import React, { Component } from 'react'; import { Menu, Icon } from 'antd'; const { SubMenu } = Menu; class Nav extends Component { constructor(props) { super(props); //react定义数据 this.state = { } } handleClick = e => { console.log('click ', e); }; render() { return ( <Menu onClick={this.handleClick} style={{ width: 256 }} defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" > <SubMenu key="sub1" title={ <span> <Icon type="mail" /> <span>数据管理</span> </span> } > <Menu.Item key="3">用户管理</Menu.Item> <Menu.Item key="4">角色管理</Menu.Item> </SubMenu> <SubMenu key="sub2" title={ <span> <Icon type="appstore" /> <span>配置管理</span> </span> } > <Menu.Item key="5">参数配置</Menu.Item> <Menu.Item key="6">地图配置</Menu.Item> </SubMenu> <SubMenu key="sub4" title={ <span> <Icon type="setting" /> <span>签到管理</span> </span> } > <Menu.Item key="9">签到查询</Menu.Item> <Menu.Item key="10">签到统计</Menu.Item> </SubMenu> </Menu> ); } } export default Nav;
实现效果，一个导航栏就出现啦，现在要把这个用在项目里面啦，选择自己喜欢的样式，添加上去，就搞定啦。
