antd的TreeSelect组件,把后台返回的数据处理成树形结构

本文介绍了如何在React应用中利用ES6语法处理Ant Design的TreeSelect组件所需的数据结构。通过遍历后台返回的数组,构建新的树形结构数据,包括设置每个节点的title、value和key属性,并根据子节点是否存在进行递归处理。最终返回一个适用于TreeSelect组件的树形数据数组。
摘要由CSDN通过智能技术生成

 思路: 

1、定义一个空数组nodeData,用于存储新构造的对象,let nodeData =[];

2、遍历后台传来的数组treeData,treeData.map()

(1)定义一个空对象, let treeObj = {};

(2)将数组中需要的属性赋值给新对象,作为新对象中的一个属性

      treeObj.title = item.deptName;
      treeObj.value = item.deptName
      treeObj.key = item.deptId;

(3)针对有子节点的数组对象,需要根据条件对节点的children数组进行递归,如果有子节点,则递归执行函数,无则不处理,

        item.hasChildren ? treeObj.children = this.handleTreeData(item.children) : null;

(特别注意,在react的class组件中,函数里面的递归也需要添加this指向,否则将无法执行)

&#x

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值