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層中不能作數據處理這種稍微複雜的運算嗎?