最近项目中有个需求,react项目中做一个菜单配置项的功能,即传入某个url的参数,匹配出菜单数据内该菜单内的子菜单项及其组件。
数据体:
/* 菜单配置项 */
export const menus = [
{
subMenu: '首页地图',
icon: '',
path: '/map',
component: HomeIndex,
menus: []
},
{
subMenu: '用户管理',
icon: '',
path: '/userManage',
component: UserManager,
menus: [
{
subMenu: '角色管理',
icon: '',
path: '/character',
component: RoleManage,
menus: [
{
subMenu: '角色管理1',
icon: '',
path: '/character1',
menus: []
}
]
},
{
subMenu: '权限管理',
icon: '',
path: '/permission',
component: PurviewManage,
menus: []
}
]
}
]
即进入userManage组件,传入"/userManage"匹配出该菜单下的子菜单项。
import { menus } from './routeConfig'
/* 递归匹配菜单 */
export class findMenu {
constructor (arr, path, key) {
this.arr = arr
this.path = path
this.key = key
this.returnedItem = []
}
matchMenus () {
let _this = this
let key = this.key
let path = this.path
this.arr.forEach(item => {
if (item.path === path) {
_this.returnedItem = item[key]
return null
} else if (JSON.stringify(item[key]) !== '[]') {
_this.arr = item[key]
_this.matchMenus()
}
})
}
}
/*
* 调用匹配菜单方法
* url:路由链接
* */
export function matchChildMenus (url) {
let urlArray = url.split('/')
const currentUrl = '/' + urlArray[urlArray.length - 1]
let matchMenu = new findMenu(menus, currentUrl, 'menus')
matchMenu.matchMenus()
return matchMenu.returnedItem
}
findMenu函数体传入3个参数,arr(数据体), path(当前url路由), key(匹配的key值)
外部调用
/* 用户管理 */
class UserManager extends React.Component {
render () {
let childMenus = matchChildMenus(this.props.match.url)
return (
<main>
<UserManagerHeader childMenus={childMenus} />
<UserManagerRoute childMenus={childMenus} />
</main>
)
}
}