标签：numbers ant dex span proc www. 功能 为我 动态
导航栏需求
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
标签：numbers ant dex span proc www. 功能 为我 动态
原文地址：https://www.cnblogs.com/xiaochengzi/p/9377001.html
