在React中将状态和回调从根组件传递给叶组件的最佳做法是什么?

时间:2016-06-14 13:57:14

标签: reactjs

我有一个层次结构的反应应用程序。 表单具有子表单,其具有参数组,其具有参数。 每个参数都有一个值数组。可以将值添加到数组中或从数组中删除(带有删除按钮的表和带有添加按钮的输入字段,为每个参数呈现)。

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

因此,我在根元素中保存所有状态(每个参数的值数组)。这有点麻烦,因为我需要压缩回调以从给定参数的值数组中添加/移除值。

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

想象一下,例如,我想从给定子表单的给定参数组的给定参数的值数组中删除一个值。我必须压缩子表单的id,参数组的id和参数的id,然后使用所有这些id调用从root传递下来的remove函数。

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

1 个答案:

答案 0 :(得分:1)

这是旧式的方式,对于大型层次结构来说很麻烦。

React还提供Context来自动提示信息,但不鼓励使用。

很多人现在使用像Redux这样的框架来管理状态。