反应递归地创建动态树

Posted 2023-03-31

【中文标题】反应递归地创建动态树

【英文标题】：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>)
    

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

【参考方案1】：

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

为带有加载状态标志的扩充树创建一个结构。它应该有这样的结构（这是伪代码）：

class Node 
   loaded: boolean,
   expanded: boolean,
   children: list<Node>

为此创建一个组件：

如果节点未展开，则不呈现其子节点 如果使用点击展开标志 如果加载了子项，则什么也不做，只需更改展开的字段 如果未加载子项 设置扩展为 true 发起ajax请求 请求完成后，将加载设置为 true，并分配子项

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