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

马塞尔

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

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

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

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

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

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

瓦莱里

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

React还提供了Context来自动使信息冒泡,但不鼓励使用它。

现在,许多人使用Redux之类的框架来管理状态。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用react-redux,通过redux状态将回调函数传递给通用组件的最佳实践是什么?

将Redux状态传递到组件时的最佳实践

在组件内部使用redux状态的最佳实践是什么?

React&Redux:connect()到多个组件和最佳实践

从回调更新React组件状态

React中的回调参数如何从子组件传递到父组件?

测试React组件对父组件的回调的好方法是什么?

在React中将状态从一个组件设置为另一个组件的最佳实践方法

如果 B 和 C 依赖于 A,那么 JS 回调最佳实践是什么?

在React中将功能组件从子组件传递到父组件

在React组件和服务之间进行通信的最佳实践是什么?

将回调函数从父组件传递到子组件react

在功能组件React中定义状态的最佳实践

在vue组件中使用样式的最佳实践是什么?

样式组件中“ ThemeProvider”的最佳实践是什么?

React Layout组件最佳实践

为什么react-dnd useDrop挂钩中的回调函数无法更新父组件状态?

在React Native中将数据从子组件传递到父组件?

React Hooks组件回调仅具有初始状态

React:从回调中设置功能组件的状态

如何以状态存储React组件并传递回调函数

在Laravel中将数据从一个Vue.js组件传递到另一个组件的最佳实践

如何在 react-native 中将状态从组件传递到主屏幕

如何在React Native中将函数和数据从组件类传递到无状态类?

在 React 中将状态数组从一个组件传递到另一个组件

在React中将状态数据从一个组件传递到另一个组件

React组件回调后如何传递新道具?

在 React 中的子组件之间传递数据的最佳方式是什么?

在React中将新状态传递给子组件