基于antd实现一个左侧导航菜单

学习react，首选UI框架，想要实现什么样的效果，都可以去找一下，无需自己写太多的代码，开箱即用，瞬间感觉自己是一个没得感情的复制黏贴程序员，api工程师...

但是为了能够在项目中发挥更好的作用，平时没事的时候还是多熟悉熟悉各种文档吧，毕竟熟能生巧这句千古名词也不是随意说说的，每一次温故的时候总会发现令我眼前一亮的东西....

话不多说，继续记录....

1：首先生成一个空组件模板

import React, { Component } from 'react';
class Nav extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
        }
    }
    render() {
        return (
            

                
我是导航菜单界面
                           
            
        )
    }
}
export default  Nav;

2：在空组件里面引入导航菜单相关要用到的组件

import { Menu, Icon } from 'antd';
const { SubMenu } = Menu;

3：参考antd文档：关于Menu导航菜单的相关组件，重要的话说三遍...
https://ant.design/components/menu-cn/

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 (
          
            
                  
                  数据管理
                
              }
            >
              用户管理
              角色管理
            
            
                  
                  配置管理
                
              }
            >
              参数配置
              地图配置
              
            
            
                  
                  签到管理
                
              }
            >
              签到查询
              签到统计
             
            
          
        );
      }
}
export default  Nav;

实现效果，一个导航栏就出现啦，现在要把这个用在项目里面啦，选择自己喜欢的样式，添加上去，就搞定啦。

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。