import React , { Component } from 'react' ; import './index.less' ; import { Link , RouteComponentProps , withRouter } from 'react-router-dom' ; import { Menu } from 'antd' ; import { menuList , MenuConfig } from '../../config/menuConfig' ; import * as Icon from '@ant-design/icons' ; import { connect } from 'react-redux' ; import { RootState } from 'typesafe-actions' ; import { setHeadTitle } from '../../redux/actions' ; const { SubMenu } = Menu ; type LeftNavProps = RouteComponentProps & typeof dispatchProps & ReturnType < typeof mapStateToProps > ; class LeftNav extends Component < LeftNavProps , { } > { menuNodes : JSX . Element [ ] = [ ] ; openKey : string = '' ; constructor ( props ) { super ( props ) ; this . menuNodes = this . getMenuNodes2 ( menuList ) ; this . getOpenKey ( menuList ) ; } getOpenKey = ( menuList ) => { return menuList . forEach ( ( item ) => { if ( item . children ) { } } ) ; } ; getMenuNodes = ( menuList ) : JSX . Element [ ] | null => { return menuList . map ( ( item ) => { if ( item . children ) { return ( < SubMenu key = { item . key } title = { item . title } icon = { React . createElement ( Icon [ item . icon ] ) } > { this . getMenuNodes ( item . children ) } < /SubMenu>); } else { return ( < Menu . Item key = { item . key } icon = { React . createElement ( Icon [ item . icon ] ) } > < Link to = { item . key } > { item . title } < /Link> < /Menu.Item>); } } ) ; } ; getMenuNodes2 = ( menuList ) : JSX . Element [ ] => { const path = this . props . location . pathname ; return menuList . reduce ( ( pre , item ) : JSX . Element [ ] => { if ( ! item . children ) { if ( item . key === path || path . indexOf ( item . key ) === 0 ) { this . props . setHeadTitle ( item . title ) ; } pre . push ( < Menu . Item key = { item . key } icon = { React . createElement ( Icon [ item . icon ] ) } > < Link to = { item . key } onClick = { ( ) => this . props . setHeadTitle ( item . title ) } > { item . title } < /Link> < /Menu.Item>); } else { pre . push ( < SubMenu key = { item . key } title = { item . title } icon = { React . createElement ( Icon [ item . icon ] ) } > { this . getMenuNodes2 ( item . children ) } < /SubMenu>); } return pre ; } , [ ] ) ; } ; render ( ) { let path = this . props . location . pathname ; if ( path . indexOf ( '/product' ) === 0 ) { path = '/product' ; } return ( < div className = "left-nav" > < Link to = "/" className = "left-nav-header" > { } < h1 > 俊劫学习系统 < /h1> < /Link> < div > < Menu selectedKeys = { [ path ] } defaultOpenKeys = { [ this . openKey ] } mode = "inline" theme = "dark" > { this . menuNodes } < /Menu> < /div> < /div>); } } const dispatchProps = { setHeadTitle } ; const mapStateToProps = ( state ) => ( { user : state . user } ) ; export default connect ( mapStateToProps , dispatchProps ) ( withRouter ( LeftNav ) ) ;