最近公司做了一個系統，因為頁面涉及的表單交互非常多，如果使用之前的 Node + Express 的開發模式效率是非常低的，因此經過考慮，最后決定使用 Node + React 的開發模式，并且使用了螞蟻金服出品的開源框架 Ant Design。

正如Ant Design 官方介紹： "在中臺產品的研發過程中，會出現不同的設計規范和實現方式，但其中往往存在很多類似的頁面和組件，給設計師和工程師帶來很多困擾和重復建設，大大降低了產品的研發效率。"在這次開發的項目中，因為數據交互非常頻繁，大量的表單、時間選擇器、表格、單選多選框，以及各種標識狀態的組件，如果光靠手寫或者使用 jQuery 插件，其開發的工作量仍然是相當大的，因此，Ant Design "經過大量的項目實踐和總結，沉淀出一個中臺設計語言 Ant Design。旨在統一中臺項目的前端 UI 設計，屏蔽不必要的設計差異和實現成本，解放設計和前端的研發資源。"

同時，React 也是第一次使用，起初對于這種 Html 與 JS 代碼混雜的書寫格式搞得很不舒服，因為作為一個前端開發者，被"結構與邏輯分離"的思想洗腦太久了，但實際上組件的 HTML 是組成一個組件不可分割的一部分，能夠將 HTML 封裝起來才是組件的完全體，React 發明了 JSX 讓 JS 支持嵌入 HTML 不得不說是一種非常聰明的做法，讓前端實現真正意義上的組件化成為了可能。所以在使用了 React 開發一段時間后，越來越感覺到 React 封裝組件的高效。而 Ant Design 則封裝了一系列高質量的 React 組件，十分適用于在企業級的應用中，框架提供的 api 十分詳盡，上手和使用相對簡單，值得一提的是，?Ant Design 使用 ES6 進行編寫，因此使用過程中對 ES6 也是一次學習的機會。

在這里主要就項目中使用到的主要的組件以及遇到的一些坑進行總結，也是對這個項目開發的一個簡單的梳理。

項目開發中主要用到的組件：

Button、Icon、Row/Col、BackTop、Pagination、Tabs、Checkbox、Cascader、Form、Rate、Select 、Modal、Message、Table

Button 的使用比較簡單，需要注意的地方是為了和原生 button 進行區分，Form表單中的 Button 組件的submit 需要寫成 htmlType = "submit" ，其他類似的組件也是同理。 ?

舉例：

使用了兩種類型的Button， 并且定義了 Button 的點擊事件，事件在 render() 方法外進行定義。

Icon的使用非常簡單，Ant Design 提供了常用了Icon ， 使用時只需要點擊圖標即可完成代碼的復制。Icon 自帶兩個屬性，type 定義了圖標的類型， spin 定義圖標是否有旋轉動畫。

Row / Col 主要用于柵格布局，和BootStrap 的使用十分相似，不同的是 Ant Design 默認把頁面分成24份，而不是12份，增加了布局的靈活度。

Tabs 十分實用，通過Tabs 的切換可以十分高效地在同一個頁面中展現不同業務的信息。Tabs 的使用也十分簡單，只要將每一個 Tab 面板放在 Tabpane 標簽里面即可。值得一提的是，如果要實現標簽的動態切換（根據 state 的狀態進行切換），需要在 Tabs 標簽中添加 activeKey 屬性，別且綁定 到具體的控制標簽切換的 state 上，更重要的是，需要添加 onChange 方法，在標簽切換的事件中設置當前 tab 的 state，如下：

Form 是項目中用的最多的表單了，表單項通過 FormItem 進行定義，并且可以設置對其方式、驗證規則、錯誤提示信息以及綁定初始值，十分有用。

在最外層的 Form 標簽上定義了表單的提交方法，并且把所有的表單項都獲取復制到 values 參數中，因此可以對 values 對象進行操作，獲取到對象的字段值并經行處理，如下：

Modal 主要在彈框和提示框中使用，如果彈框中需要進行數據操作，如選擇和填寫信息，則直接使用 Modal ，定義標題，按鈕方法，以及彈框中的具體內容；如果只是簡單的信息提示，比如成功或失敗、警告等，則可以根據場景使用 Modal 下的 success、warning、confirm、info方法，使用起來也十分方便，需要注意的是，在這些方法中無法獲取到正確的 this 指向，因此需要在方法外部先獲取到 this 指針。如下：

?

?

Table 的的使用過中則遇到了很多的坑，主要是因為表格中的數據都是通過請求接口獲取到的，因此需要對數據進行動態渲染，同時表格中的數據還允許操作，甚至，有多個表格需要同時渲染，因此表格的一切都要再請求接口后動態生成，然后渲染到 DOM 結構中去。舉例：

在這里表格中的數據通過請求接口獲取，每一個 item 包含了表格中的所有數據，同時手動為表格中的每一行數據添加一個 index 屬性用于標識數據的唯一性（所有通過 for 或者 map 循環出來的數據都需要加標識條目唯一性的 key 值，可以是 id，也可以是自己添加的屬性，唯一即可，不這樣做的話瀏覽器會報出警告）。

當獲取到數據并生成所有的表格結構后，將此對象復制給 state，并插入到 DOM，便可以實現動態表格以及動態數據的插入。表格的使用，謹慎仔細是十分重要的。

?

Cascader 在封裝選擇省市區組件中使用到，這里也有較多的技巧。組件代碼如下：

1 import React, { Component, PropTypes } from 'react' 2 import { connect } from 'react-redux' 3 import Cascader from 'antd/lib/cascader' 4 import Button from 'antd/lib/button' 5 import message from 'antd/lib/message' 6 import ajax from '../../utils/service' 7 import * as inputActions from '../../actions/input' 8 9 let province = [ 10 { value: 2, label: "北京", isLeaf: false }, 11 { value: 3, label: "安徽", isLeaf: false }, 12 { value: 4, label: "福建", isLeaf: false }, 13 { value: 5, label: "甘肅", isLeaf: false }, 14 { value: 6, label: "廣東", isLeaf: false }, 15 { value: 7, label: "廣西", isLeaf: false }, 16 { value: 8, label: "貴州", isLeaf: false }, 17 { value: 9, label: "海南", isLeaf: false }, 18 { value: 10, label: "河北", isLeaf: false }, 19 { value: 11, label: "河南", isLeaf: false }, 20 { value: 12, label: "黑龍江", isLeaf: false }, 21 { value: 13, label: "湖北", isLeaf: false }, 22 { value: 14, label: "湖南", isLeaf: false }, 23 { value: 15, label: "吉林", isLeaf: false }, 24 { value: 16, label: "江蘇", isLeaf: false }, 25 { value: 17, label: "江西", isLeaf: false }, 26 { value: 18, label: "遼寧", isLeaf: false }, 27 { value: 19, label: "內蒙古", isLeaf: false }, 28 { value: 20, label: "寧夏", isLeaf: false }, 29 { value: 21, label: "青海", isLeaf: false }, 30 { value: 22, label: "山東", isLeaf: false }, 31 { value: 23, label: "山西", isLeaf: false }, 32 { value: 24, label: "陜西", isLeaf: false }, 33 { value: 25, label: "上海", isLeaf: false }, 34 { value: 26, label: "四川", isLeaf: false }, 35 { value: 27, label: "天津", isLeaf: false }, 36 { value: 28, label: "西藏", isLeaf: false }, 37 { value: 29, label: "新疆", isLeaf: false }, 38 { value: 30, label: "云南", isLeaf: false }, 39 { value: 31, label: "浙江", isLeaf: false }, 40 { value: 32, label: "重慶", isLeaf: false }, 41 { value: 33, label: "香港", isLeaf: false }, 42 { value: 34, label: "澳門", isLeaf: false }, 43 { value: 35, label: "臺灣", isLeaf: false } 44 ]; 45 46 let options = province 47 48 class Location extends Component { 49 constructor(props) { 50 super(props); 51 52 } 53 state = { 54 options: options, 55 inputValue: '', 56 } 57 58 componentWillMount(){ 59 const {hideLoading} = this.props; 60 setTimeout(() => { hideLoading()}, 1000) 61 } 62 63 _onChange = (value, selectedOptions) => { 64 console.log(value); 65 this.setState({ 66 inputValue: selectedOptions.map(o=>o.label).join(', ') 67 }); 68 const onChange = this.props.onChange; 69 70 if (onChange) { 71 onChange({...value}); 72 } 73 } 74 75 _loadData = (selectedOptions) => { 76 const targetOption = selectedOptions[selectedOptions.length - 1]; 77 const id = targetOption.value; 78 targetOption.loading = true; 79 80 if (selectedOptions.length == '1') { 81 // 點擊省,獲取市 82 ajax.post(ajax.api.GETSERVICEAREA, { id: id, token: localStorage.token }).then(data => { 83 if(data.status.code == '1'){ 84 targetOption.loading = false; 85 targetOption.children = []; 86 data.result.map((v, k)=>{ 87 // 拼出市 88 targetOption.children.push({ 89 value: v.id, 90 label: v.name, 91 isLeaf: false, 92 }); 93 }); 94 this.setState({ 95 options: [...this.state.options], 96 }); 97 } 98 }); 99 }else if (selectedOptions.length == '2') { 100 // 點擊市,獲取區 101 ajax.post(ajax.api.GETSERVICEAREA, { id: id, token: localStorage.token }).then(data => { 102 if(data.status.code == '1'){ 103 targetOption.loading = false; 104 targetOption.children = []; 105 data.result.map((v, k)=>{ 106 // 拼出區 107 targetOption.children.push({ 108 value: v.id, 109 label: v.name, 110 isLeaf: true, 111 }); 112 }); 113 this.setState({ 114 options: [...this.state.options], 115 }); 116 } 117 }); 118 }else { 119 targetOption.loading = false; 120 } 121 } 122 123 _resetLocation = () => { 124 document.getElementsByClassName('ant-cascader-picker-clear')[0].click(); 125 this.setState({ 126 inputValue: '', 127 }); 128 } 129 130 render() { 131 return ( 132 <div> 133 <Cascader 134 options={this.state.options} 135 loadData={this._loadData} 136 onChange={this._onChange} 137 changeOnSelect 138 placeholder="" 139 /> 140 </div> 141 ) 142 } 143 } 144 145 export default connect(state => ({ 146 showLoginLayer: state.login.isShowLoginLayer 147 }), inputActions)(Location)

其中要注意的地方很多，首先是初始值的設置。因為使用省市區組件，不能一次性拉取到所有的地區，這樣會十分消耗性能，造成不良的用戶體驗，正確的做法是在點擊時獲取下一級的地區信息，這樣有針對性的請求可以減少加載時間，那么問題來了，如何實現？

首先，使用 Cascader 的 api 中有 loadData 屬性，可以定義數據的加載，同時，onChange 事件可以監聽到每一次的數據變化，但是使用 Cascader 有一個限制，便是第一級的數據需要在加載組件之前就定義并獲取到，否則無法進行下一級數據的加載，因此這里單獨定義了所有了省的數據：

?

onChange 事件獲取到當前選擇的對象，并提供了兩個參數，分別是選擇的當前值（數組類型）和選擇的多級對象（當前選擇的對象和當前對象下一級的數組對象）。

在獲取到當前選中的對象后對值進行拼接處理并賦值給 inputValue （在組件框中顯示的選中值），同時設置onChange（）方法，將值的變化情況通知給父組件（如 FormItem ）

loadData（）方法用于組件級聯數據的加載，其參數就是 onChange（）方法的第二個參數，在這里獲取到參數的最后一個對象（即當前點擊的對象），通過判斷參數的長度來識別當前要獲取的數據的類型（市還是區），獲取到數據后生成組件要求的數據格式，最后將格式化的數據賦值給 option 就可以了。

?

最后，模擬了一個重置（清空）的功能，Cascader 值的清空有兩點，一是選擇框內容的清空，二是級聯數據的重置，內容的清空比較簡單，直接將 inputValue 設置為空即可，而級聯數據的重置不能將 option 設置為空，這樣會導致級聯組件無法使用（下拉數據為空），為此使用了一個小技巧：

在組件的 api 屬性中有一個allowClear 屬性，默認是 true，即允許清空，其效果是當鼠標移到選擇數據后的級聯表單上會出現一個 叉號的按鈕，如下：

通過開發者工具可以獲取到這個按鈕的類名，那么之后的操作就簡單了: 自定義一個重置（清空）按鈕，然后觸發清空按鈕的事件即可：

?

以上是一些常用組件使用過程中需要注意的地方，針對 react 和 ant design 使用過程中出現的問題和解決方案，請參考文章：React 開發常見報錯解決方法

?

轉載于:https://www.cnblogs.com/wx1993/p/6511389.html

總結

以上是生活随笔為你收集整理的Ant Design 使用小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。