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

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

antd -> Table 樹形數(shù)據(jù)展示

效果如下：

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

第二步：把src里面的文件全部刪除，然后分別創(chuàng)建 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 是我封裝的數(shù)據(jù)，代碼如下：

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:[], //表格數(shù)據(jù)}componentDidMount () {// 獲取數(shù)據(jù)樹this.handleDataTree();}handleDataTree=()=>{// 獲取data.js里面的數(shù)據(jù)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里面帶的參數(shù)可以看官網(wǎng)的API。

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

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

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

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

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

antd-Cascader 級聯(lián)選擇（把平級數(shù)據(jù)改為樹形）

除了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:[], //數(shù)據(jù)}onChange=(value)=> {console.log(value);}componentDidMount () {// 獲取數(shù)據(jù)樹this.handleDataTree();}handleDataTree=()=>{// 獲取data.js里面的數(shù)據(jù)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>)} } 復制代碼

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

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

總結

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

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