使用HoC时如何正确分配通用道具?

时间:2019-09-16 13:31:21

标签: reactjs typescript

所以我有一个组件,该组件传递给应该增强原始组件的HOC。

我为组件正在接收的道具声明了一种类型,但是我仍然收到错误“ TS2741”,内容为:

Property 'auth' is missing in type '{}' but required in type 'AppProps'

我写了一个小例子,您可以在这里看到: https://stackblitz.com/edit/react-ts-huaq8s

所以我的猜测是,TypeScript检查props中返回函数中的withAuth是否具有通过我们的类型声明的属性。这只会失败,因为我们正在检查的属性是稍后添加的(通过<WrappedComponent ... />

根据我目前的知识,我想我必须以某种方式告诉TypeScript应该检查返回的WrappedComponent是否具有P。但是我不知道该怎么做。

很明显,在我问这个问题之前,我在论坛上阅读了很多在线文章和一些问题,但是我仍然找不到答案。

这里有人可以帮我吗?

2 个答案:

答案 0 :(得分:1)

我相信您只需要将AppProps类型传递给withAuth,否则就不会使用您声明的泛型。

即:

const AppWithAuth = withAuth<AppProps>(App)

这是您要寻找的吗?

https://stackblitz.com/edit/react-ts-uxhgql?file=index.tsx

答案 1 :(得分:0)

所以这可能有点复杂,我不是100%确信这确实是正确的方法,但是可以。

这里的目标是在HOC中包装一个需要auth属性的常规组件,该组件将提供auth属性。为此,您需要将import * as casbin from 'casbin'; ^ SyntaxError: Unexpected token * 参数实际上是一个需要withAuth的组件(就像auth一样),而您的结果将是一个不需要的组件。

这是您可以实现的方式:

App

Working example