react-router-dom 与 TypeScript [英] react-router-dom with TypeScript

问题描述

我正在尝试将 React 路由器与 TypeScript 结合使用.但是，我在使用 withRouter 函数时遇到了一些问题.在最后一行，我收到了非常奇怪的错误:

I'm trying to use react router with TypeScript. However, I have certain problems using withRouter function. On the last line, I'm getting pretty weird error:

Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'RouteComponentProps<any>'.
      Property 'match' is missing in type '{}’

代码如下:

import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface HomeProps extends RouteComponentProps<any> {
}

interface HomeState { }

class Home extends React.Component<HomeProps, HomeState> {
  constructor(props: HomeProps) {
    super(props);
  }
  public render(): JSX.Element {
    return (<span>Home</span>);
  }
}

const connectModule = connect(
  (state) => ({
    // Map state to props
  }),
  {
    // Map dispatch to props
  })(Home);

export default withRouter(connectModule);

推荐答案

我使用不同的方法来解决这个问题.我总是将不同的属性(路由器、常规和调度)分开，所以我为我的组件定义了以下接口:

I use a different approach to fix this. I always separate the different properties (router, regular and dispatch), so I define the following interfaces for my component:

interface HomeRouterProps {
  title: string;   // This one is coming from the router
}

interface HomeProps extends RouteComponentProps<HomeRouterProps> {
  // Add your regular properties here
}

interface HomeDispatchProps {
  // Add your dispatcher properties here
}

您现在可以创建一个新类型，将所有属性组合到一个类型中，但我总是在组件定义期间组合这些类型(我不会在此处添加状态，但如果您需要，请继续).组件定义如下所示:

You can now either create a new type that combines all properties in a single type, but I always combine the types during the component definition (I don't add the state here, but if you need one just go ahead). The component definition looks like this:

class Home extends React.Component<HomeProps & HomeDispatchProps> {
  constructor(props: HomeProps & HomeDispatchProps) {
    super(props);
  }

  public render() {
    return (<span>{this.props.match.params.title}</span>);
  }
}

现在我们需要通过容器将组件连接到状态.它看起来像这样:

Now we need to wire the component to the state via a container. It looks like this:

function mapStateToProps(state, ownProps: HomeProps): HomeProps => {
  // Map state to props (add the properties after the spread)
  return { ...ownProps };
}

function mapDispatchToProps(dispatch): HomeDispatchProps {
  // Map dispatch to props
  return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);

此方法允许完全类型化连接，因此组件和容器是完全类型化的并且重构它是安全的.唯一不安全的重构是路由中映射到 HomeRouterProps 接口的参数.

This method allows a fully typed connection, so the component and container are fully typed and it is safe to refactor it. The only thing that isn't safe for refactoring is the parameter in the route that is mapped to the HomeRouterProps interface.

这篇关于react-router-dom 与 TypeScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！