javascript - 从父级调用反应子功能组件上的函数

Question

我有一个非常庞大且复杂的 React 应用程序。它旨在表现得像一个桌面应用程序。该界面是带有选项卡的文档样式界面，每个选项卡可以是许多不同类型的编辑器组件之一（目前有 14 个不同的编辑器屏幕）。一次打开大量标签是可能的（20-30 个标签）。该应用程序最初是使用 React 类组件编写的，但是使用更新的组件（并且需要大量重构）我已经使用钩子转移到功能组件。我更喜欢函数的简洁语法，这似乎是一般推荐的方向，但我遇到了类中的一种模式，我不知道如何用函数复制。

我遍历所有打开的选项卡并在每个选项卡上调用 save 方法（使用引用）的函数。就像是：

openTabs.forEach((tabRef) => tabRef.current.save());

因此，如果我将其设为功能组件，那么我将保存方法作为分配给函数内部常量的函数：

const save = () => {...}

但是我怎么能从父母那里打电话呢？我认为每个组件的保存都应该存在于该组件中，而不是更高级别。除了会使查找和维护变得非常困难之外，它还会破坏我的模块化加载，它只在需要时加载组件，因为保存必须高于代码拆分的级别。

我能想到的这个问题的唯一解决方案是在组件上有一个保存道具和一个 useEffect() 来在该保存道具更改时调用保存 - 然后我只需要写一个任何东西的虚拟值到那个保存道具来触发保存......这似乎是一种非常违反直觉且过于复杂的方法......或者我只是继续坚持使用这些组件的类？

谢谢你，特洛伊

标签： javascriptreactjsreact-hooks

Answer 1

I don't think Redux or anything like that is a good solution here because the amount of individually owned bits of state are so complex.

我不知道 Redux 是否出于某种原因完全不适用，但我认为它是此类项目中的最佳选择之一。

每个模块都有一个单独的 reducer，管理模块的状态，每个 reducer 都有一个“saveTabX”操作，所有这些都可以在 Root 组件中调度。