Reactjs 我应该使用道具还是状态来存储TreeView数据？

我正在学习react，并尝试创建一个TreeView组件。 此树视图可以接收数据本身（通过“data”道具）或作为rest资源的url。我在这里集中讨论最后一个选项

组件首先呈现为“加载”状态，ajax调用在componentDidMount上进行。 当数据从REST服务返回时，我只将其分配给组件的'props.data'和setState（{loading:false}），它正确地呈现了填充的树

这里的一个问题是，我正在修改组件本身的道具，它在react中是一种反模式，但在状态中添加数据感觉不正确。 我倾向于将状态视为与UI交互相关，并将其用于“折叠”或“选定”之类的事情 更新父组件（包含TreeView的组件）时，TreeView的“数据”属性被重置（componentDidMount未被调用，因此它甚至不会再次获取），组件会中断。 使用“状态”可以修复此问题，因为它的值在此父级重新渲染期间保持不变

这里应该使用state吗？有更好的模式吗

除了从服务器检索数据外，还存在更改树数据本身的问题（例如将树项移动到其他位置） 现在我只需更改“props.data”中的项目，并强制更新相关的内部组件

我应该在TreeView根组件中使用state和setState，让react再次区分整个过程吗？顺便说一句，这是一棵很大的树。。。 我是否应该将树包装在其他一些数据组件中，以传递“数据”

有人能帮助找到构造此组件的最佳方法吗？

---

谢谢，圣诞快乐：）

您可以在父组件（包含

TreeView

）的

componentDidMount

方法中调用Rest服务，并将树数据设置为父组件状态。这样，您就不会自己改变组件的道具，父组件更新也不会重置

Treeview的数据。（更好的做法是使用存储来存储和获取数据，并通过控制器视图将数据传递给
TreeView
。）

至于更改树数据本身，您可以在父组件中定义回调函数，并在数据更改时从
TreeView
调用这些函数。实际的数据分配发生在父组件的回调函数中。这将导致父组件重新渲染，该组件重新渲染
树视图。（更好的做法是在父组件中调用Flux操作来更改存储中保存的数据，然后将这些数据传播到视图。）