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树形中添加树的自定义元素，可以，很强势，官方文档，看就完了，哈哈。