动态显示菜单列表

显示菜单列表

注意：默认暴露，当引入名字时可以任意名字

# 1.手动添加代码：
	 <Menu
	defaultSelectedKeys={['99']}
	defaultOpenKeys={['sub1']}
	mode="inline"
	theme="dark"
	>
	<Menu.Item key="1" icon={<PieChartOutlined />}>
		<Link to='/home'>首页</Link>
	</Menu.Item>
	<Menu.Item key="2" icon={<DesktopOutlined />}>
		<Link to='/user'>用户管理</Link>
	</Menu.Item>
	<Menu.Item key="3" icon={<ContainerOutlined />}>  
		<Link to='/role'>角色管理</Link>
	</Menu.Item>

	<SubMenu key="sub2" icon={<AppstoreOutlined />} title="说说">
		<Menu.Item key="9" icon={<AppstoreOutlined />}>   
			<Link to='/category'>品类管理</Link>
		</Menu.Item>
		<Menu.Item key="10" icon={<AppstoreOutlined />}>                  
			<Link to='/product'>说说管理</Link>
		</Menu.Item>
	</SubMenu>
	</Menu>
		
# 2.通过reduce()和递归调用动态显示菜单列表：
getMenuList_reduce = (menprList) =>{
	return menprList.reduce((pre,item)=>{
		if(!item.children){
			pre.push((
		<Menu.Item key={item.key} icon={<PieChartOutlined />}>
			<Link to={item.to}>{item.title}</Link>
		</Menu.Item>
		))
	}else{
		pre.push((
		<SubMenu key={item.key} icon={<AppstoreOutlined />} title={item.title}>
			{this.getMenuList_reduce(item.children)}
			</SubMenu>
		))
		}
		return pre
	},[])
	}
return (
.....
	<Menu
	defaultSelectedKeys={['99']}
	defaultOpenKeys={['sub1']}
	mode="inline"
	theme="dark"
	>
	{this.getMenuList_reduce(menuList)}
	</Menu>
	.....
)
	3.通过map()和递归调用动态显示菜单列表
getMenuList = (menuList) =>{
	return menuList.map(item=>{
	if(!item.children){
		return(
	<Menu.Item key="1" icon={<PieChartOutlined />}>
		<Link to={item.to}>{item.title}</Link>
	</Menu.Item>
	)
	}else{
		return(
		<SubMenu key="sub2" icon={<AppstoreOutlined />} title={item.title}>
			{this.getMenuList(item.children)}
		</SubMenu>
		)
		}
		})
	}
	return (
	.....
	<Menu
	defaultSelectedKeys={['99']}
	defaultOpenKeys={['sub1']}
	mode="inline"
	theme="dark"
	>
	{this.getMenuList_reduce(menuList)}
	</Menu>
	.....
	)

路由组件中三个重要属性：

withRouter高阶组件：

包装非路由组件，返回一个新的组件
新的组件向非路由组件传递3个属性：history,location,match
未包装前：

包装后：

注意当前选中的菜单项样式的两个参数：defaultSelectedKeys，selectedKeys(/ /home)

自动打开当前子列表

注意点：

# 1.打开子列表的前提：必须有children属性，并通过item.children.find()查询当前路径（pathname）是否与子列表的key相同
item.children.find(cItem => cItem.key===path)
【注意：数据文件格式的准备】
# 2.路径的获取有两个地方：
const path = this.props.location.pathname;
# （1）设置当前选中的菜单项样式（手动点击列表）
selectedKeys={[path]}
# （2）自动打开当前子列表（浏览器中搜索列表）
defaultOpenKeys={[openKey]}
【注意：用对参数defaultOpenKeys，不是openKeys】
【注意：如下自动生成列表的方法需要 ‘前置 ’】
<Menu
defaultOpenKeys={['/message']}
mode="inline"
theme="dark"
selectedKeys={[path]}
defaultOpenKeys={[openKey]}
>
{this.getMenuList_reduce(menuList)}         --------前置该方法
</Menu>
# 【思考：前置到哪？】
# （1）方法一：
render() {
 const menuNodes = this.getMenuList_reduce(menuList)       --------第一步：前置
 ......
 return (
 <Menu
...
>
{menuNodes}         --------第二步：调用
</Menu>
 )
}
【注意：该方法弊端，每次render()渲染页面的时候都会执行该方法，效率不高】
# （2）方法二：使用生命周期
 # 为第一次render()之前做数据准备（必须同步）
UNSAFE_componentWillMount(){         --------第一步：前置
        this.menuNodes = this.getMenuList_reduce(menuList)
  }
  render() {
  ......
  return (
  <Menu
...
>
{ this.menuNodes}           --------第二步：调用
</Menu>
  }

react生命周期