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

Posted 2020-12-25 xiaochengzi

 

导航栏需求

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