The second day of the react proj

注册路由 admin.js

• 后台管理的路由组件

export default class Admin extends Component {
  render() {
    const user = memeoryUtils.user
    if (!user._id) {
      return <Redirect to='/login'/>
    }
    return (
      <Layout style={{height: '100%'}}>
        <Sider>
          <LeftNav/>
        </Sider>
        <Layout>
          <Header>Header</Header>
          <Content style={{backgroundColor: 'white'}}>
            <Switch>
              <Route path='/home' component={Home}/>
              <Route path='/category' component={Category}/>
              <Route path='/product' component={Product}/>
              <Route path='/role' component={Role}/>
              <Route path='/user' component={User}/>
              <Route path='/charts/bar' component={Bar}/>
              <Route path='/charts/line' component={Line}/>
              <Route path='/charts/pie' component={Pie}/>
              <Redirect to='/home' />
            </Switch>
          </Content>
        <Footer style={{textAlign: 'center', color: '#aaaaaa'}}>推荐使用谷歌浏览器，可以获得更佳页面操作体验</Footer>
      </Layout>
    </Layout>
   )
 }
}

• 导航菜单配置: config/menuConfig.js

const menuList = [
  {
    title: '首页', // 菜单标题名称
    key: '/home', // 对应的path
    icon: 'home', // 图标名称
  },
  {
    title: '商品',
    key: '/products',
    icon: 'appstore',
    children: [ // 子菜单列表
    {
      title: '品类管理',
      key: '/category',
      icon: 'bars'
    },
    {
      title: '商品管理',
      key: '/product',
      icon: 'tool'
    }
    ...
    ...
  ]
}

• 导航菜单组件: left-nav/index.js
  • 根据指定菜单数据列表产生<Menu>的子节点数组 使用map() + 递归

      getMenuNode = (menuList) => {
        // 得到当前请求的 path
        const path = this.props.location.pathname
        return menuList.map(item => {
          if(!item.children) {
            return (
              <Menu.Item key={item.key}>
                <Link to={item.key}>
                  <Icon type={item.icon}/>
                  <span>{item.title}</span>
                </Link>
              </Menu.Item>
            )
          } else {
            // 如果当前请求路由与当前菜单的某个子菜单的key 匹配, 将菜单的key 保存为openKey
            if(item.children.find(cItem =>         
              path.indexOf(cItem.key)===0)) {
                this.openKey = item.key
              }
              return (
                <SubMenu
                  key={item.key}
                  title={
                    <span>
                      <Icon type={item.icon}/>
                      <span>{item.title}</span>
                    </span>
                  } >
                  {this.getMenuNodes(item.children)}
                </SubMenu>
              )
            }
          })
        )
    

  • 在第一次 render() 之前执行一次

      componentWillMount() {
        this.menuNodes = this.getMenuNodes(menuConfig)
      }
    

  • withRouter: 高阶组件，包装非路由组件返回一个包装后的新组件，新组件会向被包装组件传递 history/location/match/ 属性

      export default withRouter(LeftNav)
    

Header组件

• 实现下三角

    &::after {
      content: '';
      position: absolute;
      top: 30px;
      right: 50%;
      transform: translateX(50%);
      border-top: 20px solid white;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid transparent;
    }
  

• 包含n 个日期时间处理的工具函数模块

    export function formateDate(time) {
      if (!time) return ''
      let date = new Date(time)
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()+ ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
  

}

• 抽取通用组件: link-button

   import React from 'react'
   import './index.less'
   export default function LinkButton (props) {
     return <button {...props} className='link-button'></button>
   }
  

• 请求path 对应的标题

    getTitle = (path) => {
      let title
      menuList.forEach(menu => {
        if(menu.key===path) {
        title = menu.title
      } else if (menu.children) {
        menu.children.forEach(item => {
          if(path.indexOf(item.key)===0) {
            title = item.title
           }
          })
         }
       })
      return title
     }