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

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

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

效果如下：

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

第二步：把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')); 復(fù)制代碼

data.js 是我封裝的數(shù)據(jù)，代碼如下：

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

App.js 開始使用Table進(jìn)行實(shí)操啦，代碼如下：

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} //不展示分頁(yè)器，如果需要?jiǎng)h除該行代碼即可rowKey={recode => recode.id} //表格行的key/></div>)} } 復(fù)制代碼

注意： 1.Table里面帶的參數(shù)可以看官網(wǎng)的API。

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

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

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

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

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

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

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

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;} }復(fù)制代碼

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>)} } 復(fù)制代碼

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

這里的const {parentId} = dataMap[key];是把dataMap[key]里的parentId解構(gòu)出來(lái)。

總結(jié)

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

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