react -> antd （Table 與 Cascader 平級資料轉樹形實操）
如果你剛開始學習前端或者 React，將 UI 框架作為你的第一步可能不是最好的主意。 (這是引用antd官網的一句話)，雖然說一開始用antd作為UI框架對新手來說並不是很好，但是如果工作需要呢，那就不得不這樣做了。
下面我就挑兩個常用而且對新手稍微有點難度元件來進行講解，分別是 table ofollow,noindex">表格 和 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解構出來。