Question

我无法连接到路由器和连接。这是我得到的错误：

(184,27): error TS2345: Argument of type 'ComponentClass<Pick<any, never>> & { WrappedComponent: ComponentType<any>; }' is not assignable to parameter of type 'ComponentType<RouteComponentProps<any>>'.
  Type 'ComponentClass<Pick<any, never>> & { WrappedComponent: ComponentType<any>; }' is not assignable to type 'StatelessComponent<RouteComponentProps<any>>'.
    Type 'ComponentClass<Pick<any, never>> & { WrappedComponent: ComponentType<any>; }' provides no match for the signature '(props: RouteComponentProps<any> & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

这是代码：

export default withRouter(connect(mapStateToProps)(MainPage));

Answer 1

您的道具界面应该扩展RouteComponentProps。传递给RouteComponentProps的类型变量应描述您想要的参数。

例如，如果您希望此路线上有两个参数（blogName和blogId）以及一些道具（徽标和项目），那么您的完整组件道具将如下所示：

interface IProps extends RouteComponentProps<{ blogName: string, blogId: number  }> {
  className?: string
  logo?: React.ReactNode
  items?: Array<INavItem>
}

请注意下图中VSCode如何正确选择参数：

Answer 2

Shoopik在上面的评论中是正确的：

withRouter期望的类型与您传递给它的类型不匹配。我相信这是您将这些接口传递给React.Component的方式的结果。

我不熟悉您用于MainPage道具类型（any & RouteProps位）的语法，但您可能想尝试使用以下内容明确声明该接口：

export interface MainPageProps extends RouteProps{
    /* you can add additional properties in here*/
}

然后使用它来声明你的MainPage类似的：

class MainPage extends React.Component<MainPageProps, any>

使用路由器连接错误做出反应

2 个答案: