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

Question

我有层次结构的反应应用程序。 表单具有子表单，其中包含具有参数的参数组。 每个参数都有一个值数组。这些值可以添加到数组中或从数组中移除（带有删除按钮的表格和带有添加按钮的输入字段将针对每个参数呈现）。

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

因此，我将所有状态（每个参数的值数组）保存在根元素中。这有点麻烦，因为我需要向下调用回调以从给定参数的值数组中添加/删除值。

另外，我冒泡的回调函数需要在根元素中具有“this”边界，但参数绑定在组件树的叶子组件中。

想象一下，例如，我想从给定子窗体的给定参数组的给定参数值的数组中删除一个值。我必须将子窗体的id，参数组的id和参数的id降到最低，然后使用所有这些id调用从根传递下来的remove函数。

这是一个正确的方法还是有更好的方法？

Answer 1

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

React还提供了Context自动将信息降低，但不鼓励使用它。

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