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

导航栏需求

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

参数传入格式

    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

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

猜你喜欢