react项目-使用antdesign组件库的总结

antdesign是蚂蚁金服开发的一套react组件,主要使用在中后台管理系统;组件丰富,文档清晰;脚手架:dva-cli，create-react-app.

dva-cli的安装：

$ npm install dva-cli -g

$ dva -v0.7.0

create-react-app 相似

执行命令便可开始开发,很方便.

使用中遇到的问题总结:

1 , 版本控制:脚手架默认是没有进行版本控制的,须要本身修改一下配置,给生产文件添加hash:

路径:node_models/roadhog/lib/config/webpack.config.prod.js:

修改:

filename:[name].[hash].js            //index入口文件

chunkFilename:'[name].[hash].js'      //各个页面的js文件,name为各个文件的文件名,也可使用id(id是文件的id名,通常为1,2,3....)

90行:  '[name].[hash].css')  ('common', 'common.[hash].js'))  //common文件

注:在路由中,ensure方法的参数三也是文件名,也可经过此修改

2.数据交互:使用axios进行数据交互,使用方法和jq的ajax相似;

由于普通的jq的ajax请求默认为application/x-www-form-urlencoded,以formdata对象传递,在后台中,tomcat中

会有个默认的解析过程,而默认状况下,axios将js对象序列化成JSON,(后台没有默认的解析过程,因此后获取不

到)若想转换为application/x-www-form-urlencoded format 的格式,可使用qs.stringify,或者

querystring.stringify进行转化.

3.antd中的因此组件默认都有key属性,当须要在不刷新页面的状况下,重置组件因此的值,状态,能够改变此属

性的值.

4.input输入:当使用formItem进行表单验证时,须要将input 的值或默认值设置在formItem组件中,当formitem组

件中使用checkBox组件时,需同时设置CheckBox组件的defaultChecked属性和formItem组件initialValue属性.

5.Selete组件验证:当须要多选时,必须显示指定数据的格式:type:'array',由于默认数据为string，,数组中的元素的类型为string,(所以当有数字时,必需要强制转换类型);当遍历option元素时,一般须要设置key值,此时key值也做为value属性,并在onchange函数中被返回,固然,key和value也可同时存在

6.数据验证:validator中的callback必须执行,callback的参数便是errors中的错误信息.

以上是在使用中使用到,文档中又没有醒目的提示的问题.

7.react的合成事件:采用驼峰写法;是基于Virtual DOM 实现的一个sytheticEvent层,符合W3C标准,不存在ie的

兼容性,可使用stopPropagation()和preventDefault()中断冒泡行为.

8.数据交互:官方栗子中使用的是[axios]

(https://github.com/mzabriskie/axios/blob/master/README.md#using-applicationx-www-form-urlencoded-

format)插件,使用方法文档介绍的很清楚;

(文档:By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-

urlencoded format instead, you can use one of the following options.)

axios默认将数据系序列化成json格式(可是后台没有默认的解析过程,因此后获取不到),如果想以application/x-

www-form-urlencoded(在jquery中默认是以这种格式,后台中,tomcat中会有个默认的解析过程,)格式传递时,需

要将数据作额外的处理,可使用qs方法处理.

** 注意：**：axios使用qs.stringfify方法序列化数据时，会和json同样默认忽略undefined：

9. react-form组件：当使用了form组件的setFieldVlaues属性后，组建的value和defautValue属性将失效。只能使用setFieldValue方法。

10.文件上传： 单个文件上传时，能够按照普通的ajax方法上传对象；当上传多个文件时，后台将没法收到参数，必须使用formDate()对象，（切记，formDate对象不能嵌套，或重复使用；文件上传时，数据也不能够再序列化（qs.Stringify）,同理使用jq的ajax方法时，也须要设置属性：processData:false。）

11.form表单提交和按钮提交的区别(在无状态函数中):表单提交会有刷新行为,如何避免? 解决:antd中form组件的提交行为已被阻止:button为submit,并添加onClick事件

12.Link组件在Button组件中在Firefox中点击事件无效,需将Link包裹Button

dva-cli 中的写法： 1.dispatch中的type值应该写全:index/add 2.注册model时,应判断是否已绑过,避免重复绑定而报错(app._model方法取得全部已绑定的model) 3.yield 的delay需本身写 4.yield call(requst(),params): requst必须是个function,一般返回一个fetch,params是传递给request中的参 数, 格式为{method:'post/get',body:'至关于ajax的data',header:''} 5.routerReudx.push({ pathname: '/docs/list', query: { modal: true }, state: { fromDashboard: true, ... } })在目标页使用location属性获取值 6.reat-router异步加载时注意事项： 一、require(‘components/Index').default中require方法的参数不能使用变量，只能使用字符串！ 二、若是你的组件是使用es5的module.exports导出的话，那么只须要require(‘components/Index')便可。而若是你的组件是使用es6的export default导出的话，那么须要加上default！例如：require(‘components/Index').default 三、若是在路由页面使用了按需加载（require.ensure）加载路由级组件的方式，那么在其余地方（包括本页面）就不要再import了，不然不会打包生成chunk文件。简而言之，须要按需加载的路由级组件必须在路由页面进行加载。 问题:

1.数据验证:上述6中提到,validator中的callback()必须回调,即便是成功的时候,可是同时也有个问题,就是当验证成功时回调,form的验证结果中会将设置了callback()函数的input验证为失败,所以对于这种状况须要作单独判断,如何破?

2.数据处理:

场景:在modul数据层中,获取到结果后,便用数组的遍历方法对数据作进一步筛选,可是项目会报错,难道modul层中不能作数据处理这种稍微复杂的运算吗?