这是一个比较简单的demo，适合对React有一定了解，但是在项目中应用还有些困惑的同学。阅读前最好已经了解了React的基本语法，和一些es6的语法。
本文假定的需求是写一个图书管理的后台。稍微有点长，大概分下面几个部分。
- 环境和依赖、编译
- dev server
- react-hot-loader
- react-router
- CSS Module
- react-ui组件库
- 高阶组件
- mock数据
- CRUD
- 在弹出层中编辑
- 项目结构
现在有挺多start-kit，还有create-react-app这样的工具，这里不打算用这些，而是从空项目入手，让大家可以多了解一些配置是做什么用途的。从我的项目经验来看，前端现在的发展速度，想做一个通用的start-kit，一劳永逸是很难的。一般一个项目周期3-6个月左右，这个start-kit里面的大部分依赖包可能都升级了，很多配置可能就不可用了，比如babel5升到babel6。
整个demo里可能会有一些“私货”，比如自己写的组件，一些开发习惯等等。
项目地址在这里，这里贴出来的代码有些可能并不完整，每一段结束我都打了一个tag，可以checkout出来执行。如果有报错，先看下nodejs的版本是否大于 7.6.0，是否有依赖没有安装。
环境和依赖、编译
安装nodejs
这里需要node v7.6.0以上版本，因为后面会使用koa2。
可以使用 n 或者 nvm 来管理node版本
npm npmjs和aws国内访问比较慢，可以换淘宝的镜像源，这里在项目根目录建一个.npmrc文件
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
也可以使用 nrm 切换npm源，很方便。
$ npm install -g nrm
$ nrm ls
* npm ----- https://registry.npmjs.org/
cnpm ---- http://r.cnpmjs.org/
taobao -- https://registry.npm.taobao.org/
nj ------ https://registry.nodejitsu.com/
rednpm -- http://registry.mirror.cqupt.edu.cn
skimdb -- https://skimdb.npmjs.com/registry
$ nrm use taobao
创建一个项目
首先创建一个空的文件夹，在下面执行
$ npm init
安装依赖包
$ npm install react react-dom prop-types --save
$ npm install webpack babel-core babel-loader babel-plugin-react-require babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react autoprefixer css-loader less-loader postcss-loader sass-loader style-loader url-loader file-loader less node-sass --save-dev
babel
- babel-core
- babel-loader：babel的webpack插件。
- babel-plugin-react-require：如果出现 “React is not defined” 的问题，可以安装这个插件。原因是把React打包到项目里，而某些组件没有import React导致。建议不要把React打包到项目里。
- babel-plugin-transform-object-rest-spread：es6解构赋值插件。
- babel-preset-es2015：es6语法转换
- babel-preset-react：jsx语法转换
css
- autoprefixer：PostCSS插件，自动添加各种前缀
- css-loader：读取js文件中引入的css文件，内置了CSS Module的功能
- file-loader：处理js引入的文件
- less-loader：less语法转换为css
- postcss-loader：PostCSS转换器
- sass-loader：sass语法转换为css
- style-loader：把转换的css文件转为js模块
- url-loader：file-loader的封装，提供一些额外功能
- less：less-loader的依赖包
- node-sass：sass-loader的依赖包
使用eslint （可选）
推荐使用eslint做代码检查，安装依赖包，这里用了airbnb的代码规范
$ npm install babel-eslint eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import eslint-import-resolver-webpack --save-dev
在项目根目录建一个.eslintrc文件，因为我是无分号党，所以semi设置了"never"
{
"extends": ["airbnb"],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"es6": true,
"node": true
},
"settings": {
"import/parser": "babel-eslint",
"import/resolver": {
"webpack": {
// webpack 文件路径
"config": "webpack.config.js"
}
}
},
"rules": {
// 允许js后缀
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/forbid-prop-types": 0,
// 强制无分号
"semi": [2, "never"]
}
}
配置webpack config
建一个webpack.config.js文件。这里是一个比较常用的配置，有些细节的配置可以参考相关文档。
const path = require('path')
const webpack = require('webpack')
const autoprefixer = require('autoprefixer')
module.exports = {
entry: {
// 需要编译的入口文件
app: './src/index.js'
},
output: {
path: path.join(__dirname, '/build'),
// 输出文件名称规则，这里会生成 'app.js'
filename: '[name].js'
},
// 引用但不打包的文件
externals: { 'react': 'React', 'react-dom': 'ReactDOM' },
plugins: [
// webpack2 需要设置 LoaderOptionsPlugin 开启代码压缩
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
// Uglify的配置
new webpack.optimize.UglifyJsPlugin({
beautify: false,
comments: false,
compress: {
warnings: false,
drop_console: true,
collapse_vars: true
}
})
],
resolve: {
// 给src目录一个路径，避免出现'../../'这样的引入
alias: { _: path.resolve(__dirname, 'src') }
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
// 可以在这里配置babelrc，也可以在项目根目录加.babelrc文件
options: {
// false是不使用.babelrc文件
babelrc: false,
// webpack2 需要设置modules 为false
presets: [
['es2015', { 'modules': false }],
'react'
],
// babel的插件
plugins: [
'react-require',
'transform-object-rest-spread'
]
}
}
},
// 这是sass的配置，less配置和sass一样，把sass-loader换成less-loader即可
// webpack2 使用use来配置loader，并且不支持字符串形式的参数，x需要使用options
// loader的加载顺序是从后向前的，这里是 sass -> postcss -> css -> style
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
// 开启了CSS Module功能，避免类名冲突问题
options: {
modules: true,
localIdentName: '[name]-[local]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
autoprefixer
]
}
}
},
{
loader: 'sass-loader'
}
]
},
// 当图片文件大于10KB时，复制文件到指定目录，小于10KB转为base64编码
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './images/[name].[ext]'
}
}
]
}
]
}
}
写一个Hello world
src/index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import '_/styles/index.scss'
class App extends Component {
render() {
return (
<div>Hello world.</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
src/styles/index.scss
body {
font-size: 14px;
}
console下执行
$ node_module/.bin/webpack
Asset Size Chunks Chunk Names
app.js 29.7 kB 0 [emitted] app
[0] ./src/styles/index.scss 1.24 kB {0} [built]
[3] ./~/base64-js/index.js 3.5 kB {0} [built]
[4] ./~/buffer/index.js 48.8 kB {0} [built]
[5] ./~/buffer/~/isarray/index.js 131 bytes {0} [built]
[6] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
[7] ./~/ieee754/index.js 2.08 kB {0} [built]
[8] ./~/style-loader/fixUrls.js 3 kB {0} [built]
[9] (webpack)/buildin/global.js 808 bytes {0} [built]
[10] ./src/index.js 2.14 kB {0} [built]
[11] ./~/css-loader?{"modules":true,"localIdentName":"[name]-[local]"}!./~/postcss-loader?{}!./~/sass-loader/lib/loader.js!./src/styles/index.scss 186 bytes {0} [built]
[12] ./~/style-loader/addStyles.js 8.51 kB {0} [built]
+ 2 hidden modules
这里可能会有一个“DeprecationWarning: loaderUtils.parseQuery()”，babel-loader的问题，下个版本应该会修复
$ git checkout step-1
建一个server
我们这里使用koa2来做开发服务器，首先，安装koa
$ npm install koa koa-router koa-send http-proxy save-dev
在demo文件夹下建一个index.html
<!doctype html>
<html>
<head>
<title>React Example</title>
</head>
<body>
<div id='root'></div>
<script src="/react.min.js"></script>
<script src="/react-dom.min.js"></script>
<script src="/app.js"></script>
</body>
</html>
在根目录下建一个server.js
const Koa = require('koa')
const send = require('koa-send')
const Router = require('koa-router')
const app = new Koa()
const router = new Router()
router.get('/', async function (ctx) {
await send(ctx, 'demo/index.html')
})
router.get('/app.js', async function (ctx) {
await send(ctx, 'build/app.js')
})
// 线上会使用压缩版本的React，而在开发的时候，我们需要使用react-with-addons的版本来查看错误信息
// 所以这里我通常会把React和ReactDOM代理到本地未压缩的文件
router.get('**/react.min.js', async function (ctx) {
await send(ctx, 'demo/react-with-addons.js')
})
router.get('**/react-dom.min.js', async function (ctx) {
await send(ctx, 'demo/react-dom.js')
})
app.use(router.routes())
app.listen(3000, function () {
console.log('server running on http://localhost:3000')
})
在终端执行
$ node server.js
打开浏览器，输入 localhost:3000 ，就可以看到 “Hello world” 了。
$ git checkout step-2
加入react-hot-loader
hot loader有两个方案，一个方案是使用 webpack-dev-middleware和webpack-hot-middleware，优点是可以和开发服务器共用一个server，缺点是配置比较繁琐。
另一个方案是用react-hot-loader，优点是配置比较简单，缺点是要另外启动一个server来代理资源。
因为react-hot-loader 3现在还是beta版，所以需要加 @next 安装
npm install --save react-hot-loader@next webpack-dev-server --save-dev
在项目根目录添加一个 webpack.dev.config.js 文件，和webpack.config.js稍有不同，去除了代码压缩的配置，增加了react-hot-loader的插件配置
const path = require('path')
const webpack = require('webpack')
const autoprefixer = require('autoprefixer')
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
// 需要编译的入口文件，增加了react-hot-loader的配置
app: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3001',
'webpack/hot/only-dev-server',
'./src/index.js',
],
},
output: {
// 输出文件名称规则，这里会生成 'app.js'
filename: '[name].js',
publicPath: '/',
},
// 引用但不打包的文件
externals: { react: 'React', 'react-dom': 'ReactDOM' },
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
resolve: {
// 给src目录一个路径，避免出现'../../'这样的引入
alias: { _: path.resolve(__dirname, 'src') },
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
// 可以在这里配置babelrc，也可以在项目根目录加.babelrc文件
options: {
// false是不使用.babelrc文件
babelrc: false,
// webpack2 需要设置modules 为false
presets: [
['es2015', { modules: false }],
'react',
],
// babel的插件
plugins: [
'react-hot-loader/babel',
'react-require',
'transform-object-rest-spread',
],
},
},
},
// 这是sass的配置，less配置和sass一样，把sass-loader换成less-loader即可
// webpack2 使用use来配置loader，并且不支持字符串形式的参数了，必须使用options
// loader的加载顺序是从后向前的，这里是 sass -> postcss -> css -> style
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
// 开启了CSS Module功能，避免类名冲突问题
options: {
modules: true,
localIdentName: '[name]-[local]',
},
},
{
loader: 'postcss-loader',
options: {
plugins() {
return [
autoprefixer,
]
},
},
},
{
loader: 'sass-loader',
},
],
},
// 当图片文件大于10KB时，复制文件到指定目录，小于10KB转为base64编码
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './images/[name].[ext]',
},
},
],
},
],
},
}
在 server.js 里加入代码，启动hot loader server
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const config = require('./webpack.dev.config')
const DEVPORT = 3001
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
quiet: false,
noInfo: true,
stats: {
colors: true
}
}).listen(DEVPORT, 'localhost', function (err, result) {
if (err) {
return console.log(err)
}
})
把 app.js 重定向到 webpack-dev-server
/* 删掉这一段
router.get('/app.js', async function (ctx) {
await send(ctx, 'build/app.js')
})
*/
// 如果请求出现跨域问题的话，参考master分支下的代码，把这里改成http-proxy转发
router.get('**/*.js(on)?', async function (ctx) {
ctx.redirect(`http://localhost:${DEVPORT}/${ctx.path}`)
})
这时执行 node server 访问 localhost:3000 会出现一个 “React Hot Loader: App in …/index.js will not hot reload correctly because index.js uses during module definition. For hot reloading to work, move App into a separate file and import it from index.js.” 警告，我们需要拆分 src/index.js 文件
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))
// 注意，要增加这句
module.hot && module.hot.accept()
src/App.js
import React, { Component } from 'react'
import '_/styles/index.scss'
class App extends Component {
render() {
return (
<div>Hello world.</div>
)
}
}
export default App
重启服务，修改App.js代码试试看吧。
$ git checkout step-3
加入react-router 4.0
$ npm install react-router-dom --save
这里使用hashRouter，修改App.js代码（暂时忽略样式）
import React from 'react'
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import Author from '_/components/author'
import Category from '_/components/category'
import Book from '_/components/book'
import '_/styles/index.scss'
function App() {
return (
<Router>
<div>
<div>
<Link to="/author">作者</Link>
<Link to="/category">分类</Link>
<Link to="/book">书籍</Link>
</div>
<div>
<Route path="/author" component={Author} />
<Route path="/category" component={Category} />
<Route path="/book" component={Book} />
</div>
</div>
</Router>
)
}
export default App
在 components 下面建3个文件夹author/category/book，每个放入一个index.js文件，先简单render一个div
export default function () {
return (
<div>书籍列表</div>
)
}
启动服务，点击链接，看下url变化
$ git checkout step-4
CSS Module
css-loader 提供了CSS Module的功能，在开发SPA应用的时候，可以减少css类名冲突带来的问题
之前webpack已经配置过了，现在可以直接使用
options: {
modules: true,
// 这个的配置是 "文件名-类名"，比较简单，实际项目中，可以加入hash，例如'[local]-[hash:base64:5]'
localIdentName: '[name]-[local]',
},
在styles文件夹下面加两个文件
src/styles/header.scss
.container {
width: 100%;
height: 50px;
}
src/styles/menu.scss
.container {
width: 200px;
}
修改App.js
import React from 'react'
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import Author from '_/components/author'
import Category from '_/components/category'
import Book from '_/components/book'
import '_/styles/index.scss'
// 和引入js文件一样
import _header from '_/styles/header.scss'
import _menu from '_/styles/menu.scss'
function App() {
return (
<Router>
<div>
{/* 和使用对象一样使用类名 */}
<div className={_header.container}>
React Example
</div>
<div className={_menu['container']}>
<Link to="/author">作者</Link>
<Link to="/category">分类</Link>
<Link to="/book">书籍</Link>
</div>
<div>
<Route path="/author" component={Author} />
<Route path="/category" component={Category} />
<Route path="/book" component={Book} />
</div>
</div>
</Router>
)
}
export default App
render后的代码，可以看到两个组件使用了两个相同的类名，但是在两个不同的文件里，生成的类名也不同
<div class="header-container">...</div>
<div class="menu-container">...</div>
完整代码checkout step-5
$ git checkout step-5
使用ui组件库
组件库这里加点私货，使用了react-ui。文档可以参考这里。
$ npm install rctui classnames query-string refetch --save
在src/components/author下面加一个List.js文件，这是一个比较常见的使用state的流程，组件加载后获取数据，重新设置数据，再渲染
import React, { Component } from 'react'
import { Table, Card } from 'rctui'
import fetch from 'refetch'
class List extends Component {
constructor(props) {
super(props)
this.state = {
data: {
list: [],
},
}
}
componentWillMount() {
fetch.get('/authorlist.json').then((res) => {
// 实际项目中，这里最好判断一下组件是否已经unmounted
this.setState({ data: res.data })
})
}
render() {
// 这里可以根据data的状态，返回其它内容，例如
// if (!this.state.data) return <Loading />
return (
<Card>
<Card.Header>作者列表</Card.Header>
<Table
data={this.state.data.list}
columns={[
{ name: 'id', header: 'ID' },
{ name: 'name', header: '姓名' },
{ name: 'nationality', header: '国籍' },
{ name: 'birthday', header: '生日' },
]}
/>
</Card>
)
}
}
export default List
修改src/components/author/index.js，增加一条Route
render() {
const { match } = this.props
return (
<div>
<Route
exact
path={`${match.url}`}
{/* 这里可以直接用 component={List}，不过我们后面要对这里做一些修改 */}
render={() => <List />}
/>
</div>
)
}
在demo下加了一个authorlist.json
{
"data": {
"total": 2,
"page": 1,
"size": 10,
"list": [
{
"id": 1,
"name": "乔治.R.R.马丁",
"birthday": "1948-09-20",
"nationality": "美国"
},
{
"id": 2,
"name": "托尔金",
"birthday": "1892-01-03",
"nationality": "英国"
}
]
}
}
完整代码
$ git checkout step-6
高阶组件
在上面的示例中，通过[ fetch -> setState -> render ] 这样一个流程来处理数据。一个项目中，可能有很多地方会有类似的场景和使用方式。可以通过高阶组件的方式来抽取这个流程，使它可以在更多的地方使用。
在项目中新建一个文件 src/hoc/fetch.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import refetch from 'refetch'
import { Mask, Spin } from 'rctui'
const PENDING = 0
const SUCCESS = 1
const FAILURE = 2
export default function (Origin) {
class Fetch extends Component {
constructor(props) {
super(props)
this.state = {
data: null,
status: props.fetch ? PENDING : SUCCESS,
}
this.fetchData = this.fetchData.bind(this)
}
componentWillMount() {
if (this.props.fetch) this.fetchData()
this.isUnmounted = false
}
componentWillUnmount() {
this.isUnmounted = true
}
fetchData() {
let { fetch } = this.props
if (typeof fetch === 'string') fetch = { url: fetch }
// 设置状态为加载中
this.setState({ data: null, status: PENDING })
refetch.get(fetch.url, fetch.data).then((res) => {
// 如果组件已经卸载，不处理返回数据
if (this.isUnmounted) return
// demo数据格式统一为，成功返回data，失败返回error
if (res.data) {
this.setState({ status: SUCCESS, data: res.data })
} else {
this.setState({ status: FAILURE, message: res.error })
}
}).catch((e) => {
if (this.isUnmounted) return
this.setState({ status: FAILURE, message: e.message })
})
}
render() {
const { status, data } = this.state
// 状态为成功，返回组件，并且传入data
if (status === SUCCESS) {
return <Origin {...this.props} data={data} fetchData={this.fetchData} />
}
// 加载中，返回一个动态的加载中
if (status === PENDING) {
return (
<div style={{ position: 'relative' }}>
<Mask >
<Spin size={40} type="simple-circle" />
</Mask>
</div>
)
}
// 处理失败信息
if (status === FAILURE) {
return <div>{this.state.message}</div>
}
return null
}
}
Fetch.propTypes = {
fetch: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
])
}
Fetch.defaultProps = {
fetch: null
}
return Fetch
}
修改之前的src/components/author/List.js，移除了state相关的代码，变成了一个纯粹展示的组件，所以直接写成一个函数
import React from 'react'
import PropTypes from 'prop-types'
import { Table, Card } from 'rctui'
import fetch from '_/hoc/fetch'
function List(props) {
const { data } = props
return (
<Card>
<Card.Header>作者列表</Card.Header>
<Table
data={data.list}
columns={[
{ name: 'id', header: 'ID' },
{ name: 'name', header: '姓名', sort: true },
{ name: 'nationality', header: '国籍' },
{ name: 'birthday', header: '生日', sort: true },
]}
/>
</Card>
)
}
List.propTypes = {
data: PropTypes.object.isRequired,
}
export default fetch(List)
src/components/author/index.js 也要稍作修改
render() {
const { match } = this.props
return (
<div>
<Route
exact
path={`${match.url}`}
{/* 这里加了fetch的属性 */}
render={() => <List fetch={{ url: '/authorlist.json' }} />}
/>
</div>
)
}
完整代码
$ git checkout step-7
加入mock数据
前面用了一个json文件来模拟数据，通常可以使用mock.js或者faker.js来模拟数据。这里再加一点私货，用一个我之前写的系统qenya，项目地址在这里。暂时还有一些功能待补全，文档也还没有写，不过这里可以拿来mock数据。
首先，安装一下
$ npm install qenya --save
在server下面加入启动代码
const qenya = require('qenya')
// qenya 会启动两个服务，一个是数据管理平台，可以设置数据表和api
// 另一个是api服务，通过在数据管理平台配置的api访问
qenya({
appPort: 3002,
apiPort: 3003,
render: function (res) {
if (res.data) {
return res.data
} else {
return {
error: res.errors[0].message
}
}
}
})
// api请求转发
const proxy = new httpProxy.createProxyServer({
target: 'http://localhost:3003/',
changeOrigin: true
})
const methods = ['get', 'post', 'put', 'delete']
methods.forEach(m =>
router[m]('/api/*', function (ctx) {
proxy.web(ctx.req, ctx.res)
ctx.body = ctx.res
})
)
qenya会在项目下面创建一个data文件夹，数据会保存在里面。
这里暂时忽略这些配置，只要知道有接口就好。如果感兴趣，可以checkout代码，访问localhost:3002 看下api配置，后面我会慢慢完善文档。
$ git checkout step-8
CRUD
checkout代码，已经在后台配置好了四个数据接口，用来模拟服务端
get /api/authorlist 获取列表数据
get /api/author/:id 根据id获取单条记录
post /api/author 添加或编辑数据
delete /api/author 删除一条数据
新增 src/components/author/Edit.js 文件
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Card, Form, FormControl, Message, Button } from 'rctui'
import refetch from 'refetch'
import fetch from '_/hoc/fetch'
class Edit extends Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleCancel = this.handleCancel.bind(this)
}
handleSubmit(data) {
refetch.post('/api/author', data).then((res) => {
if (res.data) {
this.props.history.push('/author')
Message.success('保存成功')
} else {
Message.error(res.error)
}
})
}
handleCancel() {
this.props.history.goBack()
}
render() {
const { data } = this.props
return (
<Card>
<Card.Header>作者编辑</Card.Header>
<div style={{ padding: 20 }}>
<Form data={data} onSubmit={this.handleSubmit} >
<FormControl label="姓名" name="name" grid={1 / 3} type="text" required min={2} max={20} />
<FormControl label="生日" name="birthday" type="date" required />
<FormControl label="国籍" name="nationality" type="text" />
<FormControl>
<Button type="submit" status="primary">提交</Button>
<Button onClick={this.handleCancel}>取消</Button>
</FormControl>
</Form>
</div>
</Card>
)
}
}
Edit.propTypes = {
data: PropTypes.object,
history: PropTypes.object.isRequired,
}
Edit.defaultProps = {
data: {},
}
// 使用之前的高阶组件fetch来获取数据
export default fetch(Edit)
修改 src/components/author/index.js 文件，加入路由
import React from 'react'
import PropTypes from 'prop-types'
import { Route, Switch } from 'react-router-dom'
import List from './List'
import Edit from './Edit'
function Author(props) {
const { url } = props.match
return (
<Switch>
{/* 新增作者，不需要fetch data */}
<Route path={`${url}/new`} component={Edit} />
{/* 编辑作者，使用fetch获取数据 */}
<Route
path={`${url}/edit/:id`}
render={
({ history, match }) => <Edit history={history} fetch={{ url: `/api/author/${match.params.id}` }} />
}
/>
{/* 列表，因为加入了分页，数据处理放到了List里面 */}
<Route path={`${url}`} component={List} />
</Switch>
)
}
Author.propTypes = {
match: PropTypes.object.isRequired,
}
export default Author
修改 src/components/author/List.js 文件，因为加入分页功能，拆分了这个页面
import React from 'react'
import PropTypes from 'prop-types'
import { Card, Button } from 'rctui'
import queryString from 'query-string'
import TableList from './TableList'
function List(props) {
const { history } = props
// 从queryString中获取分页信息，格式为 ?page=x&size=x
const query = queryString.parse(history.location.search)
// 每页数据数量
if (!query.size) query.size = 10
return (
<Card>
<Card.Header>作者列表</Card.Header>
<div style={{ padding: 12 }}>
<Button status="success" onClick={() => history.push('/author/new')}>添加作者</Button>
</div>
<TableList
history={history}
fetch={{ url: '/api/authorlist', data: query }}
/>
</Card>
)
}
List.propTypes = {
history: PropTypes.object.isRequired,
}
export default List
src/components/author/TableList.js 代码
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import { Table, Pagination } from 'rctui'
import fetch from '_/hoc/fetch'
import DelButton from './DelButton'
function TableList(props) {
const { data, history, fetchData } = props
return (
<div>
<Table
data={data.list}
columns={[
{ name: 'id', width: '60px', header: 'ID' },
{ name: 'name', header: '姓名' },
{ name: 'nationality', header: '国籍' },
{ name: 'birthday', header: '生日' },
{
width: '120px',
content: d => (
<span>
<Link to={`/author/edit/${d.id}`}>编辑</Link>
{' '}
<DelButton onSuccess={fetchData} data={d} />
</span>
),
},
]}
/>
<div style={{ textAlign: 'center' }}>
<Pagination
page={data.page} size={data.size} total={data.total}
onChange={page => history.push(`/author?page=${page}`)}
/>
</div>
</div>
)
}
TableList.propTypes = {
data: PropTypes.object.isRequired,
fetchData: PropTypes.func.isRequired,
history: PropTypes.object.isRequired,
}
export default fetch(TableList)
通过react-router和高阶组件fetch，我们把author下面的所有组件（列表、分页、编辑）都变成了无状态的组件。每个组件只关心route提供了什么参数，应该怎样去展示，当需要变化的时候，history.push到相应的route就行了。
完整代码
$ git checkout step-9
占楼，刚开始学习react，感谢楼主
，thanks