反应递归地创建动态树答案

【问题标题】：react create dynamic tree recursively反应递归地创建动态树
【发布时间】：2016-05-26 08:11:59
【问题描述】：

感谢您的阅读和帮助。这是我目前的情况：

我在数据库中有很多数据，每条数据都有id，parentid（这意味着你可以使用这个parentid找到它的父母的id），名称，描述。
我想使用 react 创建一个动态树，但我不知道我有多少级节点。每个节点代表数据库中的一个 id。用户点击这棵树上的节点 A，其 parentid 等于 A 的 id 的子节点将显示/隐藏。

我不打算检索所有数据，因为这需要很长时间。现在我可以通过发送请求和获取 response.body 来获取一个节点的子节点：

 getChildren(id){
    ajax.get('http://localhost:8080/configmgmt/code/category/retriveTree/' + id)
   .end((error, response) => {
   if (!error && response) {
   console.dir(response.body );
   this.setState(subdata:response.body});

} else {
   console.log('There was an error fetching from database', error);
    }
   }
 );
}

在渲染部分，我写道：

   {this.state.subdata.map((rb,index)=>{
            return  <li><div><a href='##' onClick = {this.getChildren.bind(this,rb.id)}><em></em><label className="one_title">{rb.name}</label></a></div></li>})
    }

问题来了，我仍然不知道如何递归地创建树（因为任何节点都可能有它的子节点）。当我们只能从数据库中获取一个节点的子节点时，如何做到这一点？

【问题讨论】：

标签： recursion reactjs tree

【解决方案1】：

我会分两步完成你的任务：

为带有加载状态标志的扩充树创建一个结构。它应该有这样的结构（这是伪代码）：
```
class Node {
   loaded: boolean,
   expanded: boolean,
   children: list<Node>
}
```
为此创建一个组件：
- 如果节点未展开，则不呈现其子节点
- 如果使用点击展开标志
- 如果加载了子项，则什么也不做，只需更改展开的字段
- 如果未加载子项
  - 设置扩展为 true
  - 发起ajax请求
  - 请求完成后，将加载设置为 true，并分配子项

创建一个递归使用自身的组件不是问题。如果您不知道如何执行此操作，请阅读此处：how to render child components in react.js recursively

【讨论】：