使用React与antd新建自定导航栏

导航栏需求

1. 默认在页面左上方显示一个展开的按钮与菜单名称，点击展开按钮，可以打开菜单，菜单垂直显示
2. 有关闭菜单功能
3. 菜单显示：
   1. 按照传入的参数显示菜单
   2. 有多个菜单分类，菜单分类不可点击
   3. 每个菜单分类下，可有多个链接
4. 参数传入格式

       const menuDetail = [
         {
           categoryName:‘常用网站列表‘,
           subMenuList:[
             {
               index:1,
               name:‘淘宝‘,
               href:‘taobao.com‘
             },
             {
               index:2,
               name:‘百度‘,
               href:‘baidu.com‘
             }
           ]
         },
         {
           categoryName:‘工具网站‘,
           subMenuList:[
             {
               index:1,
               name:‘流程图‘,
               href:‘process.com‘
             },
             {
               index:2,
               name:‘事项管理‘,
               href:‘wonderlist.com‘
             }
           ]
         }
       ];

开发步骤

ant官网寻找最符合要求的原生导航栏的源码

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘antd/dist/antd.css‘;
import ‘./index.css‘;
import { Menu, Dropdown, Icon } from ‘antd‘;

const menu = (

<Menu>  <div> category one</div>  <Menu.Item key="0">    <a href="http://www.alipay.com/">1st menu item</a>  </Menu.Item>  <Menu.Item key="1">    <a href="http://www.taobao.com/">2nd menu item</a>  </Menu.Item>  <div> category two</div>  <Menu.Item key="2">    <a href="http://www.baidu.com/">3nd menu item</a>  </Menu.Item></Menu>

); ReactDOM.render( <Dropdown overlay={menu} trigger={[‘click‘]}> <a className="ant-dropdown-link" href="#"> Click me <Icon type="down" /> </a> </Dropdown>, document.getElementById(‘container‘)); 

需要将上图中的{menu}参数替换，因为我们需要根据传入的菜单参数动态显示菜单，3种待尝试方案

const

const可以使用花括号{}调用const与function

//1.变量传入const
const name = ‘Josh Perez‘;
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById(‘root‘)
);

//2.function传入const

function formatName(user) {
  return user.firstName + ‘ ‘ + user.lastName;
}

const user = {
  firstName: ‘Harper‘,
  lastName: ‘Perez‘
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById(‘root‘)
);

将Menu标签中的component列表定义为一个参数

const menuList = [?];
const listItems = numbers.map((number) =>
  <div>{menuList}</div>
);

ReactDOM.render(
  <Menu>{listItems}</Menu>,
  document.getElementById(‘root‘)
);

function

function不能直接通过{}使用非方法内的const，同一个class内定义function与const是否除外？

class

原文地址：https://www.cnblogs.com/xiaochengzi/p/9377001.html