Question

感谢阅读和帮助。到目前为止我的情况如下：

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

我不打算检索所有数据，因为这需要很长时间。现在，我可以通过发送请求获取一个节点的子节点并获得响应.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>})
    }

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

Answer 1

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

使用加载状态标志为扩充树创建结构。它应该有这样的结构（这是伪代码）：
```
class Node {
   loaded: boolean,
   expanded: boolean,
   children: list<Node>
}
```
为此创建一个组件：
- 如果节点未展开，则不要渲染其子节目
- 如果使用点击展开标志
- 如果已加载子项，则不执行任何操作，只需更改扩展字段
- 如果孩子没有装
  - set expanded to true
  - 发起ajax请求
  - 请求完成后，将loaded设置为true，并指定子项

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

以递归方式创建动态树

1 个答案: