时间戳

首页 > 解决方案 > 如何将 withRouter() 与通用组件一起使用

reactjs - 如何将 withRouter() 与通用组件一起使用

问题描述

我有一个这样的组件：

function GenericComponent<T>(props: RouteComponentProps) {
    ...
}

export default withRouter(GenericComponent)

尝试将其与 一起使用时<GenericComponent<SomeModel> />，出现以下错误：

预期 0 类型参数，但得到 1。

我如何传递T给 withRouter？

标签： reactjstypescriptreact-router

解决方案

通常你不能那样做，我认为你可以通过让一个函数作为工厂工作并使用泛型T然后返回具有该类型的组件，如下所示：

function GenericComponent<T>(props: RouteComponentProps<T>) {
  // ...
}

export function factory<T>() {
  return withRouter((props: RouteComponentProps<T>) => (
    <GenericComponent<T> {...props} />
  ));
}

// Usage
function App() {
  const FooWithId = factory<{ id: string }>();

  return (
    <FooWithId />
  )
}

推荐阅读