React---实战项目（三）

01-使用外部样式框架 antd

• 1-1 新建一个 在component/layout/index.js 文件
• 1-2 找到官网 点击
  图片.png
  找到组件
• 1-3 选一个自己看中的组件 这边选择的是Layout布局 这个组件
  图片.png

图片.png

把代码复制一下吧，这却是是没有技术含量

• 1-4 然后在app.js里面引入

      <Fragment>
        <Layouts>
            <Switch>
              {
              adminRoute.map(route=>{
                return <Route key={route.pathname}  exact={route.exact}
                path={route.pathname} component={route.component}/>
              })
              }
              <Redirect to={adminRoute[0].pathname} from='/admin' exact/>
              <Redirect to='/404'/>
            </Switch>
        </Layouts>
      </Fragment>

重点：Fragment这个标签不被浏览器解析，所有可以当做父标签
可以在标签里面传参数， 如果不穿参数 还可以 简写成 <> </>

02-调整布局

• 2-1 react 中的 {this.props.children} 相当于 vue里面的solt槽口的功能

     <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            {this.props.children}
                        </Content>

真的不愿意 cv这么多代码 呜呜呜呜

03-左侧导航展示与icon

• 3-1 在layout里面 进行img 引入

图片.png

解释一下： logo这个文件夹是放图片的 index.less 是放自己对layout的一些样式的修改的

import hd from './logo/hd.png'
import './index.less'

主要是引入自定义样式的，和一个方法图片的文件夹

 <div className="logo">
                        <img src = {hd} alt=''/> 
</div>

没啥好说的，就一点 img 里面要加alt 主要是为了不报错，，，
和图片要是加载不出来，也好有个提示

04-路由跳转与选中导航

• 4-1 因为这个layout 组件没有 被route 包裹，所以也没有 route的方法 比如 location history match 具体有什么功能的话 找又给被route 包裹的组件 在 render()里面 console。log(this.props) 自己瞅瞅吧，少年

• 4-2 这里采用的withRouter 这个高级组件
  高阶组件 就是 接受一个组件 然后一顿操作 吐出一个组件

import {withRouter} from 'react-router-dom'
@withRouter
  此处省略一个组件
export default Layouts

上面是使用了装饰器的 高阶组件 下面是没有使用 装饰器的高阶组件

export default withRouter(Layouts)

如果高阶组件 套的不到的话，个人感觉还是第二种 方便 而且还不用鼓捣装饰器，但是 如果套的多的话，还是装饰器真香