1、page js
import React from "react"; import {Link} from "react-router-dom"; import LoginUser from "service/login-service/LoginUser"; import "./index.scss"; const _loginUser = new LoginUser(); const isLogin = _loginUser.hasLogin(); const navItems = []; const navigators = []; class Navigator extends React.Component { constructor(props) { super(props); this.state = { currentType: props.nav } } activeItemClass(item) { return this.state.currentType === item.type ? 'active' : ''; } toState(item) { this.setState({ currentType: item.type }); } render() { const navigator = ( <ul className="nav nav-tabs"> {navItems.map((item, index) => { return ( <li key={'li_' + index} className={this.activeItemClass(item)}> <Link to={item.state} onClick={() => this.toState(item)}>{navigators[item.type]}</Link> </li> ) } )} </ul>); return (<div className="app-navigator">{isLogin ? navigator : null}</div>) } } export default Navigator;
import React from "react"; import {Link} from "react-router-dom"; import {connect} from "react-redux"; import MenuService from "service/MenuService"; import LoginUser from "service/login-service/LoginUser"; import {fetchMenuData} from "reduxModel/actions/MenuAction"; import "./index.scss"; const _menuService = new MenuService(); const _loginUser = new LoginUser(); const isLogin = _loginUser.hasLogin(); const mapStateToProps = state => { return { menuData: state.MenuReducer.data } }; const mapDispatchToProps = { fetchMenuData: fetchMenuData, }; class Navigator extends React.Component { constructor(props) { super(props); this.state = { currentType: props.nav } } componentDidMount() { this.props.fetchMenuData(); } activeItemClass(item) { return this.state.currentType === item.type ? 'active' : ''; } toState(item) { this.setState({ currentType: item.type }); } render() { const {menuData} = this.props; const navigator = ( <ul className="nav nav-tabs"> {menuData && _menuService.getModules(menuData.menuTree).map((item, index) => { return ( <li key={'li_' + index} className={this.activeItemClass(item)}> <Link to={item.state} onClick={() => this.toState(item)}> {menuData.navigators[item.type]} </Link> </li> ) } )} </ul>); return (<div className="app-header-nav">{isLogin ? navigator : null}</div>) } } const NavigatorContainer = connect( mapStateToProps, mapDispatchToProps )(Navigator); export default NavigatorContainer;
2、style
.app-header-nav { position: relative; width: $body-min-width; margin: auto; .nav-tabs { position: absolute; right: 0; bottom: 1px; border-bottom: none; > li { > a { margin-right: 0; border: $border; border-right: none; border-radius: 0; outline: none; background-color: $item-active-bg-color; text-align: center; &:hover { border-color: $border-color; color: $title-color; } } &:last-child > a { border-right: $border; } & { border-top: 3px solid $bg-color; } &.active { border-top: 3px solid $primary-color; > a { &, &:hover, &:focus { border-top-color: #fff; border-bottom-color: #fff; background-color: #fff; color: $primary-color; font-weight: bold; } } + li > a { &, &:hover, &:focus { border-left: none; } } } } } }