基于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


基于antd实现一个左侧导航菜单_第1张图片

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;

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


基于antd实现一个左侧导航菜单_第2张图片

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

你可能感兴趣的:(基于antd实现一个左侧导航菜单)