react: navigator

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;
          }
        }
      }
    }
  }
}