Javascript 我怎样才能使一个组件足够智能，从而了解可能来自多种来源之一的功能？

这是一个大型React/Redux应用程序

我在我的网站上有一个覆盖层

，它用于多种用途

最常见的用例：打开模式时，它位于站点内容和模式之间的

z-index

，覆盖内容。标准的东西。我们还有几种类型的警报/消息以相同的方式使用覆盖

使用覆盖的每个界面项（模式、警报、消息）在关闭时都需要自己的清理功能集，这些功能取决于用户界面中输入的内容（或未输入的内容）

当从模式内部关闭模式时（使用“x”或“取消”按钮），很容易知道这些清理功能是什么，因为我们正在从模式内部执行操作

但是，当通过单击模式后面的覆盖来关闭模式时，我如何知道运行什么来进行清理？这可能是几十个函数的任意组合，因此考虑一个开关/情况或类似的情况是不可行的。 是否有存储函数引用的标准实践？或者将清理功能从一个组件传递到另一个组件？还是另一种方法

顺便说一句：

和

组件在

组件中并排存在，但其他可能使用

的组件则不存在

---

感谢您给我的建议。

我正在添加一个答案，以防我的计划奇迹般地成为一个好计划

将

handleCleanup

功能添加到将使用覆盖的每个组件

通过在渲染时添加

ref

回调来公开该函数。使用回调，以便仅在组件可见时设置ref：

ref={ (theModal) => {
    this.focusedWindow = modalIsVisible ? theModal : undefined; }
}

轻触覆盖层时，检查ref是否可用。如果是，请运行“清理”功能：

if (this.focusedWindow) this.focusedWindow.handleCleanup();

---

如果没有看到您的代码，有点难说，但我有一些想法：

• 为什么必须强制调用“cleanup”函数？为什么模态/警报/消息组件在隐藏时不能清理自身？根据隐藏它的方式，在设置隐藏它的道具时，使用

  componentWillUnmount

  或

  componentWillReceiveProps

• 既然你说
  和

  （基于）都实现了覆盖。它们用于从组件树中的任何点覆盖组件，这样您就不必处理一个顶级的单个覆盖，这是导致您出现问题的原因之一。组件应该被隔离

---

我提供了这些可能的替代方案，因为在React中通常不鼓励对组件使用REF和命令式API调用。

您是否可以将清理函数移动到一个通常命名的方法中，然后在单击覆盖时处理关闭事件，并触发该方法？那么屏幕上的内容就无关紧要了——它只会毫无顾忌地进行清理。我可以，但使用覆盖的每个组件都有一组不同的清理功能。我认为除了这些组件之外，它们不应该存在于任何地方。因此，创建一个名为

cleanup（）

（或其他）的函数，该函数存在于模态中并调用模态清理方法，一个在警报中调用警报清理方法，另一个在消息中调用消息清理方法。然后单击覆盖时，只需调用

cleanup（）

。这是个好主意。有趣的是…我只是添加了一些类似的答案，以防没有其他人这样做，并希望这不是愚蠢的。想添加一个正确的答案吗？