Reactjs 在React中将状态和回调从根组件传递到叶组件的最佳实践是什么?

Reactjs 在React中将状态和回调从根组件传递到叶组件的最佳实践是什么?,reactjs,Reactjs,我有一个具有层次结构的react应用程序。 表单有子表单,子表单有参数组,子表单有参数组。 每个参数都有一个值数组。这些值可以添加到数组中,也可以从数组中删除(对于每个参数,都会呈现带有删除按钮的表和带有添加按钮的输入字段) 最后,我需要在根组件的数组中生成所有可能的值的交叉参数组合,并在根组件中的表中将每个可能的组合显示为一行 因此,我在根元素中保存所有状态(每个参数的值数组)。这有点麻烦,因为我需要对回调进行冒泡处理,以便从给定参数的值数组中添加/删除值 我正在冒泡的回调函数也需要在根元素中

我有一个具有层次结构的react应用程序。 表单有子表单,子表单有参数组,子表单有参数组。 每个参数都有一个值数组。这些值可以添加到数组中,也可以从数组中删除(对于每个参数,都会呈现带有删除按钮的表和带有添加按钮的输入字段)

最后,我需要在根组件的数组中生成所有可能的值的交叉参数组合,并在根组件中的表中将每个可能的组合显示为一行

因此,我在根元素中保存所有状态(每个参数的值数组)。这有点麻烦,因为我需要对回调进行冒泡处理,以便从给定参数的值数组中添加/删除值

我正在冒泡的回调函数也需要在根元素中绑定“this”,但参数绑定在组件树的叶组件中

例如,假设我想从给定子窗体的给定参数组的给定参数的值数组中删除一个值。我必须冒泡下子表单的id、参数组的id和参数的id,然后使用所有这些id调用从根传递的remove函数


这是一种正确的方法还是有更好的方法?

这是一种旧式的方法,对于大型层次结构来说会变得很麻烦

React还提供自动将信息冒泡下来,但不鼓励使用它


现在很多人都使用框架来管理状态。

你考虑过Flux/Redux/MobX吗?听起来你是在手动执行Redux为你做的事情。查看Dan Abramov关于Redux的教程,看看它是否对您有用: