知识点回顾
- react运行环境的自定义配置
react-app-rewried customize-cra
- 关闭Eslint
- 解析Less
- 主题配置
- react-router-config的使用
- Form表单
- 布局配置
- 表单属性
- 表单验证
- required
- message
- phone
- 表单事件
- 操作表单数据的方法
- Table
react-router-config的使用
- 在views中,为分类控制,新增一个容器组件
Cfy/index.js
- 调整Layout/index.js
渲染adminRoutes中的第一层路由,并向第一层路由的组件(Cfy)内部props中注入了第二层路由
renderRoutes(adminRoutes)
- 在Cfy/index.js中从props中提取第二层路由信息,并执行renderRoutes
renderRoutes(this.props.route.routes)
combinReducer的使用
- 在reducer文件夹中,为不同业务需求定义一个单独的reducer
参考reducer文件夹
- 在store/index.js中使用combindReducer整合所有reducer
装饰器语法介绍
- 使用装饰器语法前
class Login extends Components{
}
export default connect(mapState)(Login)
- 使用装饰器
@connect(mapState) //装饰器
export default class Login extends Components{
}
- 装饰器语法文档
@testable //调用装饰器,装饰后续的类或者函数
class MyTestableClass {
// ...
}
function testable(target) { //装饰器函数,参数代表被装饰的类或者函数
target.isTestable = true; //为被装饰的类,挂载属性
}
MyTestableClass.isTestable // true
装饰器的配置流程
- 配置config-overrides.js
为了让脚手架环境支持装饰器语法
- vscode对装饰器语法的识别配置
如果代码能运行,但是vscode提示语法错误,则需要配置
"settings": {
"problems.decorations.enabled": false,
"javascript.implicitProjectConfig.experimentalDecorators": true
},
在config-override.js中配置,使得react项目内部能够识别装饰器语法
文档
关于装饰器语法安装一个babel的语法库
cnpm i @babel/plugin-proposal-decorators -D
修改配置项
参考 config-override.js
资源引用路径的别名配置
@ 指向 src @action 指向 src/action
跳转config-overrides.js配置文件
addWebpackAlias({
'@':path.resolve(__dirname,'src'),
'@action':path.resolve(__dirname,'src/action'),
'@api':path.resolve(__dirname,'src/api'),
'@assets':path.resolve(__dirname,'src/assets'),
'@components':path.resolve(__dirname,'src/components'),
'@utils':path.resolve(__dirname,'src/utils')
})