Reactjs 强类型RouteWithProps

我正在尝试在TypeScript中的common PropsRoute组件上创建一个变体，并在要渲染的组件的道具上进行强键入。下面的代码看起来很接近，但仍然会导致错误

interface PropsRouteProps<P> extends RouteProps {
  component: ComponentType<P>
  withProps: P
}

export const PropsRoute = <P extends object>({
  component: WrappedComponent,
  withProps,
  ...routeProps
}: PropsRouteProps<P>): JSX.Element => {
  return (
    <Route
      {...routeProps}
      render={childProps => {
        return <WrappedComponent {...childProps} {...withProps} />
      }}
    />
  )
}

接口PropsRouteProps
扩展了RouteProps{
组件：组件类型

withProps:P
}
export const PropsRoute=
({
组件：WrappedComponent，
用道具，
…路线计划
}：PropsRouteProps
）：JSX.Element=>{
返回(
{
返回
}}
/>
)
}

错误：

ERROR in [at-loader] ./src/containers/pages/accounts/AccountInfo.tsx:88:13

TS2322: Type 'typeof AccountDetails' is not assignable to type 'ComponentType<{ details: {  [[DetailsObjectDefinition]] } | undefined; loading: boolean; }>'.

Type 'typeof AccountDetails' is not assignable to type 'StatelessComponent<{ details: {  [[DetailsObjectDefinition]] } | undefined; loading: boolean; }>'.

Type 'typeof AccountDetails' provides no match for the signature '(props: { details: {  [[DetailsObjectDefinition]] }} | undefined; loading: boolean; } & { ...; }, context?: any): ReactElement<...> | null'.

[at loader]中出现错误。/src/containers/pages/accounts/AccountInfo.tsx:88:13 TS2322:类型“typeof AccountDetails”不可分配给类型“ComponentType”。 类型“typeof AccountDetails”不可分配给类型“无状态组件”。 类型“typeof AccountDetails”与签名不匹配（props:{details:{[[DetailsObjectDefinition]]}}|未定义；加载：boolean；}&{……}，上下文？：any）：ReactElement | null”。 调用方法：

<PropsRoute
  path={`${match.path}/details`}
  component={AccountDetails}
  withProps={{
    details: this.state.details.data,
    loading: this.state.details.loading
  }}
/>

在这种情况下，要插入道具的特定组件（为了完整性）

接口参数{
电子邮件：string
}
接口道具扩展了RouteComponentProps{
详细信息：AccountDetailsResponse |未定义
加载：布尔值
}
导出类AccountDetails扩展了PureComponent{

同样，这里我希望，例如，

details

在类型与AccountDetails组件定义的道具不匹配时抛出编译器错误

---

Typescript 3.0.1-严格模式

您能发布完整错误吗？使用

“无错误运行”：true

如果默认情况下看不到完整错误，则获取完整错误。我尝试了您的示例，在填充缺少的部分后，它似乎显示了错误work@TitianCernicova-Dragomir更新了Q，但出现完全错误。在

PropsRoute

中，定义了

WrappedComponent

的位置？还请添加

AccountDetails

的声明，以便我们可以e它的props类型。@MattMcCutchen WrappedComponent是从

组件

参数中取的别名（这里不是类型，我应该重命名它）AccountDetails只是一个常规组件，其道具与withProps对象中的道具相对应。如果AccountDetails与您声称的一样，那么就不会有错误……我们需要查看声明以了解出现错误的原因。除了withProps和您对道具的定义之外，AccountDetails可能还需要childPropssRouteProps没有考虑到这一点。

interface Params {
  email: string
}

interface Props extends RouteComponentProps<Params> {
  details: AccountDetailsResponse | undefined
  loading: boolean
}

export class AccountDetails extends PureComponent<Props> {