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

王小婷

发布于 2019-11-27 22:46:58

3.9K0

发布于 2019-11-27 22:46:58

文章被收录于专栏：编程微刊

学习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导航菜单的相关组件，重要的话说三遍... 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 (
          <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;

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