reactjs - React HigherOrderComponents 与 flowtype 结合使用

Question

我在理解 Reacts Higher Order Components 以及 flowtype 和 Props 声明时遇到了一点问题。

我有两种 HOC：

模态内部的组件：

inModal() => React.Component<{modal: Modal}>

在这个 HOC 中，只需创建一个新的 Modal（一些无反应的逻辑，我已经实现）并将模态对象作为属性传递给给定的组件（这样我就可以访问我的组件内的关闭处理程序等）。

身份验证安全组件：

needsAuthentication() => React.Component<{auth: Authentication}>

因此，我可以提供一些关键功能，例如禁用帐户等，并在多个组件上重用身份验证过程。

现在他们两个都工作了。我设法通过写作将这两个放在一起：

inModal(needsAuthentication(DisableAccount))

我的问题是，inModal 需要一个能够处理名为“modal”的属性的组件，而 needsAuthentication 需要该组件能够处理一个属性“auth”。到目前为止，这还不错，因为我总是将这 2 个 HOC 组合使用。但是现在我正在构建一个组件，它不在模式内部工作，但需要身份验证。

在这里，我理解 HOC 和流类型的问题变成了一个真正的问题。

我创建了一个新组件，它需要传递一个属性，但我无法定义我的 needsAuthentication HOC 来返回一个采用该特定属性的组件，因为它会破坏其他所有内容。我可以让我的新组件能够处理模态属性并在这个丛林中闯出一条路，但我宁愿尝试真正完全理解这个问题。

我看过这个，但我的挫败感/困惑程度已经非常高，所以我无法真正理解这一切。

这应该证明我的问题

如果有人能帮我弄清楚，我会很高兴。

标签： reactjsflowtypehigher-order-functionshigher-order-components

Answer 1

如此处所见，他可以通过使用神奇的“任何”类型来完成。但这确实感觉像是在使用“大锤”。所以我暂时不会接受这个。