Question

再次与新手互动。

我有一个论坛的管理页面。这是一个具有无限深度的树结构，按order_id字段排序。我可以从api中获取它，它可以是一棵树（带有children数组字段，包含每个节点的子节点），也可以是带有ancestry（包含字符串的整个路径的平面数组）。节点，由/和parent_id字段分隔。我需要能够移动它们，展开和折叠子树，并能够在任何地方添加节点。

现在我有几个问题：

是否有一个好的现成的UI库，可以将它们拖放以重新排列？我找到了这个：https://github.com/frontend-collective/react-sortable-tree，但是我不能让它没有有限的高度框架，而且自定义这些主题看起来太复杂了。
如果我要使用react-dnd从头开始，使用此树的更有效方法是什么-将其作为树（如何添加/更新节点？）或存储它平整并在渲染上构建树（易于管理集合，但使渲染和排序逻辑变得复杂）。

Answer 1

这听起来像是一个复杂而有趣的问题。如果该库无法完成您想要的样式，那么您将不得不从头开始构建它。

我会将您所有的节点对象存储在带有children属性的Array中，该属性拥有对其所有child的引用；如果可以保证它们的唯一性，则可以使用它们的order_id作为参考。

我还将存储父节点的order_id，这将在您操纵树时提供帮助。

import numpy as np
from scipy.interpolate import CubicSpline
import pylab
x_data = np.linspace(0,5,10)
y_data = np.array([5.41041394e-01,1.42611032e-01,3.44975130e-02,
                   7.60221121e-03,1.66115522e-03,3.26808028e-04,
                   6.70741368e-05,1.14168743e-05,5.70843717e-06, 
                   1.42710929e-06])

spline = CubicSpline(x_data, y_data)

plot_x = np.linspace(0,5,1000)
pylab.plot(x_data, y_data, 'b*', label='Data')
pylab.plot(plot_x, spline(plot_x), 'k-', label='Spline')
pylab.legend(loc='best')
pylab.show()

您将不得不在渲染器上构建树，这可能是一个让人费解的事情，但是通过一点点工作就可以做到。

添加新节点时，必须更新树中新节点的父节点和子节点。

重新排列节点时，必须向上移动到父节点并将其从其子节点中移除。您还必须向下走到它的孩子，并将他们的父母设置为重新排列的节点的旧父母。这将从树中删除该节点。然后，将重新排列的节点添加到树中。

您所做的任何操作都将涉及操纵该节点的父级和子级-这就是为什么我建议同时存储子级ID和父级ID的原因。它使您不必进行太多的树遍历，而这在计算上效率不高。

我不建议您使用Nodes = [ {order_id: 1, name:"order1", children_ids:[2,3], parent_id: 0}, {order_id: 2, name:"order2", children_ids:[], parent_id: 1}, {order_id: 3, name:"order3", children_ids:[], parent_id: 1}, ]字段。移动节点的逻辑太复杂了，如果您这样做，则必须遍历并编辑整个树。

第一步是与react-dnd集成；使每个节点都可拖动。将其放到另一个节点上进行重新排列时，将触发重新排列处理程序。

好运。

ReactJS可排序dnd树设置

1 个答案: