以递归方式创建动态树

感谢您的阅读和帮助。这是到目前为止，我的情况：以递归方式创建动态树

我有很多数据在数据库中，每一块数据都有编号，parentId的（这意味着你可以找到使用该的parentId其父的ID），名称，描述。
我想创建一个动态树使用反应，但我不知道我有多少级别的节点。每个节点代表数据库中的一个id。用户在这棵树上点击一个节点A，其父节点等于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>}) 
    }

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

来源

2016-05-26 Kevin Zheng

我会做你的任务分为两步：

与负载状态标志的扩充树创建一个结构。它应该有这样的结构（这是伪代码）：
```
class Node { 
    loaded: boolean, 
    expanded: boolean, 
    children: list<Node> 
} 
```
为此创建一个组件：
- 如果节点未展开不呈现其子
- 如果使用点击扩大迹象
- 如果载入子，什么也不做，只是改变了扩展字段如果未加载
- 孩子
  - 集扩展到真正
  - 一旦请求完成发起Ajax请求
  - ，集加载到真实的，并指派儿童

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

来源

2016-05-27 05:07:23

以递归方式创建动态树

回答

相关问题