如果你剛開始學習前端或者 React，將 UI 框架作為你的第一步可能不是最好的主意。 (這是引用antd官網的一句話)，雖然說一開始用antd作為UI框架對新手來說并不是很好，但是如果工作需要呢，那就不得不這樣做了。

下面我就挑兩個常用而且對新手稍微有點難度組件來進行講解，分別是table 表格和 Cascader級聯選擇。

antd -> Table 樹形數據展示

效果如下：

第一步：打開鏈接，完成安裝和初始化和引入antd兩個步驟；

第二步：把src里面的文件全部刪除，然后分別創建 App.js 、 data.js 、 index.js

index.js 代碼如下:

import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/lib/button/style'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); 復制代碼

data.js 是我封裝的數據，代碼如下：

export default class Model {static get(){const datas=[{id:'01',name:"第一級01",children:[{id:'001',name:"第二級01",children:[{id:'0001',name:'第三級01'},{id:'0002',name:'第三級02'}]},{id:'002',name:'第二級02',}]},{id:'02',name:'第一級02',},]return datas;} }復制代碼

App.js 開始使用Table進行實操啦，代碼如下：

import React, { Component } from 'react'; import Model from './data' import {Table} from 'antd'; import 'antd/dist/antd.css'; const columns = [{title: '編碼',dataIndex: 'id',}, {title: '名稱',dataIndex: 'name',}]; export default class App extends Component{state={tableData:[], //表格數據}componentDidMount () {// 獲取數據樹this.handleDataTree();}handleDataTree=()=>{// 獲取data.js里面的數據const da = Model.get();if(da && da.length>0){this.handleGetChild(da);this.setState({tableData:da,})}}handleGetChild = (data) =>{for(let x = 0,le =data.length; x<le;x +=1){data[x] = {...data[x],key:data[x].id,code:data[x].id,name:data[x].name,}if (data[x].children && data[x].children.length > 0) {this.handleGetChild(data[x])}}}render(){return(<div><Table columns={columns} dataSource={this.state.tableData} pagination={false} //不展示分頁器，如果需要刪除該行代碼即可rowKey={recode => recode.id} //表格行的key/></div>)} } 復制代碼

注意： 1.Table里面帶的參數可以看官網的API。

? 2.如果只想展示到某一級的話就只需要在調用this.handleGetChild(da,index);的時候傳遞一個數據（就是代碼里的index），然后再

if (data[x].children && data[x].children.length > 0) {this.handleGetChild(data[x]，index+1)} 復制代碼

? 這段代碼里面加上一個index+ 1 最后在寫一個if語句判斷一下就可以。

細講 ：函數handleDataTree() 在獲取到數據后判斷，如果數據的長度大于1那么就會先執行handleGetChild()然后再把數據傳遞給this.state.tableData。至于這里為什么要調用函數來處理數據而不是直接處理數據的原因是：

如果數據只有一兩層那還好，直接寫就是了，但是如果數據有N層了呢，那就很復雜了，所以采用``````handleGetChild() ```把數據傳過去然后解析，如果這條數據里面的chilidren還有值的話，就再調用一下這個函數。這樣無論數據有多少層就都可以輕松展示了。

antd-Cascader 級聯選擇（把平級數據改為樹形）

除了App.js 和data.js 這兩個頁面的代碼跟上面的不一樣，其他的操作都是一樣的，我們先來看下效果：

data.js 代碼如下：

export default class Model {static get(){const datas=[{id:'01',name:'第一層01',parentId:'0'},{id:'001',name:'第二層001',parentId:'01'},{id:'002',name:'第二層002',parentId:'01'},{id:'0010',name:'第三層0010',parentId:'001'},{id:'0020',name:'第三層0020',parentId:'002'},{id:'0021',name:'第三層0021',parentId:'002'},]return datas;} }復制代碼

App.js 代碼如下：

import React, { Component } from 'react'; import Model from './data' import {Cascader} from 'antd'; import 'antd/dist/antd.css'; export default class App extends Component{state={cascaderData:[], //數據}onChange=(value)=> {console.log(value);}componentDidMount () {// 獲取數據樹this.handleDataTree();}handleDataTree=()=>{// 獲取data.js里面的數據const da = Model.get();if(da && da.length>0){let dataMap = {};da.forEach((item)=>{dataMap[item.id]={key:item.id,value:item.id,label:item.name,parentId:item.parentId}})let root={};for(const key in dataMap){if(key){const {parentId} = dataMap[key];if(parentId === '0'){root = dataMap[key]}else if(dataMap[parentId]){if(!dataMap[parentId].children){dataMap[parentId].children=[]}dataMap[parentId].children.push(dataMap[key])}}}this.setState({cascaderData:[root]})}}render(){return(<div><Cascader options={this.state.cascaderData} onChange={this.onChange} placeholder="Please select" /></div>)} } 復制代碼

這里需要注意的是如果想要完成改代碼就需要找到子元素的某個數據 = 父元素的某個數據，只有找到這個原理才能完成這個效果。

這里的const {parentId} = dataMap[key];是把dataMap[key]里的parentId解構出來。

總結

以上是生活随笔為你收集整理的react - antd （Table 与 Cascader 平级数据转树形实操）的全部內容，希望文章能夠幫你解決所遇到的問題。

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