react+antd 递归实现树状目录操作
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了react+antd 递归实现树状目录操作，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
1.写在前面
作为前端小白的我一直对算法和数据结构浅尝辄止，哝，吃亏了。使用多次递归实现数据格式化后将数据进行树状展示的目的，分享一下我这次挠头的经历~
2.数据
后台传过来的数据大概是这样的
{
"data":[
{
"id":1,
"name":"一级节点",
"parentId":0,
"isValid":true,
"canAddChild":true,
"parent":null,
"children":[]
},{
"id":3,
"name":"二级节点",
"parentId":1,
"isValid":true,
"canAddChild":true,
"parent":null,
"children":[]
}
],
"status":1
}
3.数据格式
data里面每个元素的parentId指向是父级元素的id，parentId为0的是结构树的顶级元素，但现在是个平面的数组不好处理，而我们要做的是树状的结构，所以首先要对数据进行格式化，将一个元素的所有子元素放到该元素的children属性中去。那么，递归就来了。
createTree = data => {
let treeArr = [];
//获取顶级父元素集合
let roots = data.filter(elemt => elemt.parentId === 0);
treeArr.push(...roots);
//从顶级元素开始，获取每个元素的子元素放到该元素的children属性中
const getChildren = (resultarr,data) => {
resultarr.forEach((elemt,index) => {
elemt.children = data.filter((item,index) => item.parentId === elemt.id);
//判断当前元素是不是有子元素被添加，如果有，再在子元素这一层循环
if(elemt.children.length > 0){
getChildren(elemt.children,data);
}
});
}
getChildren(treeArr,data);
//最后更新一下数据
this.setState({
treeArr
})
4.组件格式
因为UI组件用的是antd，使用Tree和TreeNode做树结构。因为数据已经是树状的了，而且深度我们不确定，想要按层级输出UI控件，那么，递归又来了。
renderTree = jsonTree => jsonTree.map( value => {
//遍历树状数组，如果发现他有children则先套上<TreeNode>,再对他children中的元素做相同的操纵，直到children为空的元素停止，说明他们已经是最深的那一层了。
if(value.children){
return(
<TreeNode title={
<span>
{value.name}
<Icon type="plus" onClick={this.showModal.bind(this,2,value.id)} />
<Icon type="edit" onClick={this.showModal.bind(this,1,value.id)} />
<Icon type="delete" onClick={this.showModal.bind(this,0,value.id)} />
</span>
} key={value.id}>
//对children中的每个元素进行递归
{this.renderTree(value.children)}
</TreeNode>
)
}
})
至此，就基本完成对数据的格式和对UI树的格式啦，最后在树控件中调用它，OK~
5.疯狂输出
render(){
return(
<Tree showLine={true}>
{this.renderTree(this.state.treeArr)}
</Tree>
)
}
运行，Bingo~
tips
因为目录树的每一项都是可编辑的，而原始的UI组件也没有可用配置，后来查阅文档竟然应该在TreeNode的title树形中添加树的自定义元素，可以，很强势，官方文档，看就完了，哈哈。
补充知识：antd的tree树形组件异步加载数据小案例
前不久，做业务需求时遇到一个树形选择的 问题 ， 子节点的数据要通过点击展开才去加载，在antd给出的官方文档中也有关于动态加载数据的demo，然而不够详细，自己研究之后，整理出来共享给大家借鉴下。
view.jsx（纯函数式声明）
// 渲染树的方法
const loop = data => data.map((item) => {
const index = item.regionName.indexOf(modelObj.searchValue);
const beforeStr = item.regionName.substr(0, index);
const afterStr = item.regionName.substr(index + modelObj.searchValue.length);
const title = index > -1 ? (
<span>
{beforeStr}
<span style={{ color: '#f50' }}>{modelObj.searchValue}</span>
{afterStr}
</span>
) : <span>{item.regionName}</span>;
if (item.children && item.children.length > 0) {
return (
<TreeNode key={item.regionCode} parentId={item.parentId} title={getTreeTitle(title, item)}>
{loop(item.children)}
</TreeNode>
);
}
return <TreeNode key={item.regionCode} parentId={item.parentId} title={getTreeTitle(title, item)} isGetDealer={item.isGetDealer} isLeaf={item.isLeaf}/>;
});
//树结构展开触发的方法
const onExpand = (expandedKeys) => {
console.log('onExpand-->', expandedKeys);
dispatch({
type: `${namespace}/onExpand`,
payload: {
expandedKeys,
autoExpandParent: false,
}
});
}
//异步加载树形结构子节点的方法
const onLoadData = (treeNode) => {
return new Promise((resolve) => {
resolve();
if(treeNode.props.isGetDealer===1){
let cityIds =treeNode.props.eventKey;
dispatch({
type: `${namespace}/queryDealers`,
payload: {
checkedKeys:cityIds,
}
});
}
})
}
//节点被选中时触发的方法
const onCheck = (checkedKeys,e) => {
console.log('checkedKeys',checkedKeys);
if(checkedKeys.length > 0) {
updateModel(checkedKeys,'checkedKeys');
} else {
updateModel([], 'sellers');
updateModel([], 'checkedKeys');
}
}
//dom渲染
return (
{/* 经销商省市选择 *