将HighOrderComponents与flowtype

时间:2018-05-28 12:04:41

标签: reactjs flowtype higher-order-functions higher-order-components

我在理解Reacts高阶组件与flowtype和Props声明时遇到了一些问题。

我有两种HOC:

模态内的组件:

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

在这个HOC中只需创建一个新的Modal(一些无反应的逻辑,我已经实现了)并将模态对象作为属性传递给给定的组件(因此我可以访问我的组件内的关闭处理程序等)。 / p>

身份验证安全组件:

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

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

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

inModal(needsAuthentication(DisableAccount))

我的问题是,inModal需要一个能够处理名为“modal”的属性的组件,而needAuthentication需要该组件能够处理属性“auth”。到目前为止,这很好,因为我总是使用这两个HOC组合。但是现在我正在构建一个组件,它不能在模态内部工作,但需要进行身份验证。

在这里我理解HOC和flowtype的问题成为一个真正的问题。

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

我看了this,但我的挫折感/混乱程度已经非常高,所以我真的无法理解所有这些。

This should demonstrate my problem

如果有人能帮助我搞清楚,我会很高兴。

1 个答案:

答案 0 :(得分:0)

here所示,他可以通过使用神奇的&#34;任何&#34;来完成。类型。但这确实感觉就像使用&#34; sledgehammer&#34;。所以我现在不接受这个。