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

发布时间：2020-12-15 20:26:36 所属栏目：百科来源：网络整理

导读：? 导航栏需求默认在页面左上方显示一个展开的按钮与菜单名称，点击展开按钮，可以打开菜单，菜单垂直显示有关闭菜单功能菜单显示：按照传入的参数显示菜单有多个菜单分类，菜单分类不可点击每个菜单分类下，可有多个链接参数传入格式 const menuDetai

导航栏需求

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

参数传入格式

    const menuDetail = [
      {
        categoryName:‘常用网站列表‘,subMenuList:[
          {
            index:1,name:‘淘宝‘,href:‘taobao.com‘
          },{
            index:2,name:‘百度‘,href:‘baidu.com‘
          }
        ]
      },{
        categoryName:‘工具网站‘,name:‘流程图‘,href:‘process.com‘
          },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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!