1、獲取菜單對象

static findCurrentItem(items, currentState, currentItem) {_.forEach(items, function (item) {if (item.state === currentState) {currentItem.push(item);} else if (MenuService.hasChildItems(item)) {MenuService.findCurrentItem(item.childItems, currentState, currentItem);}})}static findParentItem(items, currentItem, parentItem) {const fatherItem = _.find(items, {id: currentItem.fatherId});if (_.isEmpty(fatherItem)) {_.forEach(items, function (item) {if (MenuService.hasChildItems(item)) {MenuService.findParentItem(item.childItems, currentItem, parentItem);}})} else {parentItem.push(fatherItem);}}static hasChildItems(item) {return !!item.childItems && item.childItems.length > 0;}getCurrentItem(menus, currentState) {const currentItem = [];MenuService.findCurrentItem(menus, currentState, currentItem);return currentItem[0];}getParentItem(menus, currentItem) {const parentItem = [];MenuService.findParentItem(menus, currentItem, parentItem);return parentItem[0];}

2、獲取實際頁面module

getModules(menuTree) {const modules = [];_.forIn(menuTree, function (value, key) {if (!_.isEmpty(value)) {const moduleItem = {};const moduleItems = [];_.set(moduleItem, 'type', key);MenuService.findModuleItem(moduleItems, value);_.set(moduleItem, 'state', moduleItems[0]);modules.push(moduleItem);}});return modules;}static findModuleItem(moduleItems, menuTreeValue) {_.forEach(menuTreeValue, function (item) {if (item.state.indexOf('.') !== -1) {moduleItems.push(_.get(item, 'state'));} else if (MenuService.hasChildItems(item)) {MenuService.findModuleItem(moduleItems, item.childItems);}})}

3、獲取默認路由

getDefaultState(menuTree) {const modules = this.getModules(menuTree);if (!_.isEmpty(modules)) {return _.get(modules[0], 'state');}}

4、獲取menus

getMenu() {return new Promise((resolve, reject) => {axiosService.request({url: '/api/menus',method: 'GET'}).then(res => {const menuTree = {};const navigators = {};_.forEach(res.data, function (item) {_.set(menuTree, item.state, item.childItems);_.set(navigators, item.state, item.name);});const menu = {menuTree,navigators,defaultState: this.getDefaultState(menuTree),modules: this.getModules(menuTree)};typeof resolve === 'function' && resolve(menu);}).catch(error => {typeof reject === 'function' && reject(error);})})}getSidebarMenu(menuTree, nav) {return _.result(menuTree, nav);}

menuTree: 集合，里面包含一個nav,一個對應該nav的菜單item

[{"nav01": [nav01.menus01]},{"nav02": [nav01.menus02]}];

navigators: 一個nav，一個對應nav的名字

[{"nav01": "nav01.name"},{"nav02": "nav01.name"}];

modules:?一個nav，一個對應nav的第一個路由

[{"nav01": "nav01.defaultState01"},{"nav02": "nav01.defaultState02"}];

redux menu data:

import React from "react"; import {connect} from "react-redux"; import {withRouter} from "react-router-dom"; import {Icon} from "antd"; import _ from "lodash"; import "./index.scss"const mapStateToProps = state => {return {menuData: state.MenuReducer.data} };class Sidebar extends React.Component {constructor(props) {super(props);this.currentState = props.location.pathname;this.menus = _.result(props.menuData.menuTree, props.nav);}componentDidMount() {const defaultNavItem = this.getDefaultNavItem();if (defaultNavItem === undefined) {this.props.history.replace('/forbidden');return;}this.setActiveNavItem(defaultNavItem);this.openNavItem(defaultNavItem);if (this.hasChildItems(defaultNavItem)) {this.setActiveChildNavItem(defaultNavItem.childItems);}}getDefaultNavItem() {const currentState = this.currentState;return _.find(this.menus, function (navItem) {if (navItem.state === currentState || _.some(navItem.childItems, {state: currentState})) {return navItem;}})}setActiveNavItem(navItem) {if (this.hasChildItems(navItem)) {this.clearParentActiveStatus();} else {this.clearActiveStatusWithChildItems();navItem.isActive = true;if (!!navItem.state) {this.props.history.replace(navItem.state);}}}setActiveChildNavItem(childNavItems) {const currentState = this.currentState;this.clearActiveStatusWithChildItems();if (_.isArray(childNavItems)) {childNavItems.forEach(function (navItem) {navItem.isActive = navItem.state === currentState;});} else {childNavItems.isActive = true;}}openNavItem(navItem) {navItem.isOpen = this.hasChildItems(navItem);this.forceUpdate();}onOpenNavItem(navItem) {if (this.hasChildItems(navItem)) {navItem.isOpen = !navItem.isOpen;} else {navItem.isOpen = false;}this.forceUpdate();}clearParentActiveStatus() {this.menus.forEach(function (navItem) {navItem.isActive = false;})}clearActiveStatusWithChildItems() {this.menus.forEach(function (navItem) {navItem.isActive = false;navItem.childItems.forEach(function (childItem) {childItem.isActive = false;})})}hasChildItems(navItem) {return !!navItem.childItems && navItem.childItems.length > 0;}menuIcon(navItem) {return <Icon type={navItem.isOpen ? 'caret-down' : 'caret-right'}/> }openOrActiveClass(navItem) {const basic = "nav-item";const openClass = navItem.isOpen ? "is-open" : "";const activeClass = navItem.isActive ? "active" : "";return basic + " " + openClass + " " + activeClass;}activeClass(navItem) {const basic = "child-nav-item";const activeClass = navItem.isActive ? "active" : "";return basic + " " + activeClass;}render() {return (<aside className="app-sidebar"><ul className="list-unstyled menu">{this.menus && this.menus.map((navItem, index) => {return (<li key={'li_' + index} className={this.openOrActiveClass(navItem)}><span key={'span_' + index}className="item-name nav-item-content"onClick={() => {this.setActiveNavItem(navItem);this.onOpenNavItem(navItem)}}>{this.hasChildItems(navItem) ? this.menuIcon(navItem) : null}{navItem.name}</span> {navItem.isOpen ?<ul key={'subMenu_ul'} className="list-unstyled sub-menus">{navItem.childItems.map((childItem, itemIndex) => {return (<li key={'submenu_li_' + itemIndex}className={this.activeClass(childItem)}onClick={() => {this.setActiveChildNavItem(childItem);this.setActiveNavItem(childItem)}}><a className="item-name">{childItem.name}</a></li> )})}</ul> : null }</li> )})}</ul></aside> )} }export default withRouter(connect(mapStateToProps)(Sidebar));

scss:

@import "../../styles/varibles";.app-sidebar {overflow: hidden;width: 180px;> ul > li {position: relative;font-size: $font-lg;border-bottom: $border;border-right: $border;border-left: $border;&:first-child {border-top: $border;border-top-right-radius: $border-radius;border-top-left-radius: $border-radius;}&:last-child {border-bottom-right-radius: $border-radius;border-bottom-left-radius: $border-radius;}}.active {color: $primary-color;font-weight: bold;border-left: 3px solid $primary-color;background-color: $item-active-bg-color;a {font-weight: bold;color: $primary-color;}}.nav-item {.item-name {margin-left: 30px;height: 50px;line-height: 50px;}.anticon {position: absolute;height: 50px;line-height: 50px;left: 7px;font-size: $font-sm;color: $title-color;}&.is-open {.anticon {color: $primary-color;}.nav-item-content {color: $title-color;font-weight: bold;}}&:hover {.anticon,.nav-item-content {color: $primary-color;}}&:active {.nav-item-content {color: $primary-color;font-weight: bold;}}.sub-menu {border-top: none;font-size: $font-sm;.item-name {height: 40px;line-height: 40px;}.child-nav-item.active {.item-name {color: $primary-color;font-weight: bold;}}}} }

?

轉載于:https://www.cnblogs.com/Nyan-Workflow-FC/p/9337852.html

總結

以上是生活随笔為你收集整理的react: menuService的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。