antd picker 使用 如何_前端开发：React-router如何配置？

大家好，我来了！本期为大家带来的Web前端学习知识是”前端开发：React-router如何配置？“，喜欢Web前端的小伙伴，一起看看吧！

主要内容

1. router3.x
2. router4.x
3. antd
4. 配置less
5. mock数据

学习目标

第一节 react-router 3.x

1.react-router 3.x 安装

安装：npm install --save react-router@3.x

引入页面：import { Router, Route, hashHistory } from 'react-router'

2.react-router 3.x 配置

1.路由配置

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="about" component={About} />
    <Route path="inbox" component={Inbox}>
      <Route path="messages/:id" component={Message} />
    </Route>
  </Route>
</Router>

2.定义导航

import {Link} from 'react-router'
<Link to='about'>首页</Link>

3.路由嵌套

1. 路由中嵌套路由，外层路由需要使用双标签

<Route path="/user" component={App}>

<Route path="about" component={About} />

</Route>

2. 访问子级路由

1.如果子级路由 path='about'

访问：/user/about

2.如果子级路由 path='/about'

访问：/about

3.需要在父级组件中调用显示子级组件的方法

{this.props.children}

4.路由重定向

1. 引入{ Redirect } from 'react-router'
2. 使用<Redirect from="messages" to="/home" />

5.路由参数

1. 定义：在Route中定义,以冒号+变量名定义

<Route path='about/:id' component={About}>

2.调用：调用时要给具体的值

<Link to='about/23'>about</Link>

3. 接收路由参数:在路由加载的组件中接收

需要在生命周期函数(不限DidMount)

componentDidMount(){
	this.props.params
}

6.默认加载的路由IndexRoute

1. 引入 import { IndexRoute } from 'react-router'

2. 使用:一般是在路由嵌套中使用

<Route path='kemu' component={Kemu}>
  <IndexRoute component={Yuwen}>
  <Route path="shuxue" component={Shuxue} />
  <Route path="yingyu" component={Yingyu} />
</Route>

1. 当访问 http://localhost:3000/#/kemu 这个路径时，会默认加载 Yuwen 组件

7.路由高亮

1. 引入

import {IndexLink} from 'react-router'

2. 配置：

1. 在Link标签上手动添加 activeClassName='active'

2. 在 to='/' 这个路由上，把Link换成 IndexLink

3. 在css中定义active类名的样式

本节作业：

定义路由实现页面切换，要求当前选中项高亮显示

第二节 react-router 4.x

1.react-router 4.x 安装

安装：npm install --save react-router react-router-dom

引入页面：import { Route, HashRouter, Switch, Redirect } from "react-router-dom"

2.react-router 4.x 配置

元素描述了你在屏幕上想看到的内容，是构成 React 应用的最小砖块，与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

1.路由配置

<HashRouter>
  <Switch>
    {/* exact:精准匹配 */}
    <Route exact path="/" component={Home}></Route>
    <Route path="/mine/:user/:age?" component={Mine}></Route>
    <Route path="/news" component={News}></Route>
    {/* 404页面放在最下面 */}
    <Route path="*" component={ NotFound }></Route>
  </Switch>
</HashRouter>

2.定义导航

import {Link} from 'react-router-dom'
<Link to='about'></Link>

3.路由嵌套

1. 路由中嵌套路由，外层路由直接作为标签

<News path="/news">
  <Route path="/news/ball" component={ NewsBall }></Route>
  <Route path="/news/sports" component={ NewsSports }></Route>
</News>

2. 访问子级路由

访问：/news/ball

4.路由重定向

方式1：Redirect

1. 引入{ Redirect } from 'react-router'
2. <Route path="/news" render={() => (<Redirect to='/news/ball'/>)}></Route>

方式2：编程式导航

this.props.history.push("path")
this.props.history.replace("path")

5.路由参数

4. 定义：在Route中定义,以冒号+变量名定义

<Route path='about/:id' component={About}>

5. 调用：调用时要给具体的值

<Link to='about/23'>about</Link>

3. 接收路由参数:在路由加载的组件中接收

需要在生命周期函数(不限DidMount)

componentDidMount(){
	this.props.match.params.id
}

6.路由高亮

1. 引入

import {NavLink} from 'react-router-dom'

2. 配置：

1. 把Link换成 NavLink

2. 在css中定义active类名的样式

本节作业：

把react-router 3.x 路由作业修改成4.x版本路由

第三节 antd

1.介绍

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品”

1.特性

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 React 组件。
使用 TypeScript 构建，提供完整的类型定义文件。
全链路开发和设计工具体系 

2.支持环境

现代浏览器和 IE9 及以上（需要 polyfills）。

支持服务端渲染。

Electron

2.antd使用

1.安装：npm install antd --save

2.使用：

1.全局引入样式

import 'antd/dist/antd.css'

2. 按需加载

下面两种方式都可以只加载用到的组件

1.使用 babel-plugin-import（推荐）

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}
然后只需从 antd 引入模块即可，无需单独引入样式
// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';

2.手动引入

import DatePicker from 'antd/es/date-picker'; // 加载 JS
import 'antd/es/date-picker/style/css'; // 加载 CSS
// import 'antd/es/date-picker/style';         // 加载 LESS

3.antd组件的使用

第四节 配置less

1.配置less：

1.拉取配置文件

npm run eject

2.安装less依赖

npm install --save-dev less less-loader

3.修改配置文件

webpack.config.js

修改部分参考sass的代码

第一部分：添加less匹配
const sassRegex = /.(scss|sass)$/;
const sassModuleRegex = /.module.(scss|sass)$/;
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;

第二部分：添加less loader
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'sass-loader'
  ),
},

// less config
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},

2.mock

1.作用及优点：

作用：生成随机数据，拦截 Ajax 请求

优点：

前后端分离

让前端攻城狮独立于后端进行开发。

增加单元测试的真实性

通过随机数据，模拟各种场景。

开发无侵入

不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

用法简单

符合直觉的接口。

数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

方便扩展

支持支持扩展更多数据类型，支持自定义函数和正则

2.安装及使用

1.安装：

npm install mockjs

2.使用：

var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
 'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})

3.数据模板定义规范：

数据模板中的每个属性由 3 部分构成：属性名(name)、生成规则(rule)、属性值(value)

语法：'name|rule': value

生成规则 有 7 种格式：

'name|min-max': value

'name|count': value

'name|min-max.dmin-dmax': value

'name|min-max.dcount': value

'name|count.dmin-dmax': value

'name|count.dcount': value

'name|+step': value

4.数据占位符定义规范：

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中

语法：@占位符

@占位符(参数 [, 参数])

注意：

1.用 @ 来标识其后的字符串是 占位符。

2.占位符 引用的是 Mock.Random 中的方法

3.通过 Mock.Random.extend() 来扩展自定义占位符。

4.占位符 也可以引用 数据模板 中的属性。

5.占位符 会优先引用 数据模板 中的属性。

6.占位符 支持 相对路径 和 绝对路径

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

5.数据模板定义、占位符定义参考地址：

http://mockjs.com/examples.html

本节作业：

1. 配置less
2. 使用mockjs生成数据

本期为大家带来的Web前端学习知识”前端开发：React-router如何配置？“介绍完了，想了解更多内容的小伙伴，关注我，更多精彩等你看，我们下期再见！