reactjs - 如何使用 'withRouter' 和 'withTranslation' 导出 react 组件

Question

我正在尝试使用 withRouter 导出一个类组件和 withTranslation .对于本地化，我正在使用 i18next和 react-i18next .这可以很好地与 javascript react 。但我正在使用与 typescript 的 react 。
成分 -

class TableSorter extends React.Component<any, any> {
  state = {
    data: [],
    pagination: {},
    loading: false,
  };
  componentWillReceiveProps(nextProps: any) {
    nextProps.concussionDataProp.sort(this.compare);
  }
  compare = (a: any, b: any) => {
    ///....
  };

  render() {
    const columns = [
      {
        title: "Firstname",
        dataIndex: "firstName",
        className: "col-first-name",
      },
      {
        title: "Lastname",
        dataIndex: "lastName",
        className: "col-last-name",
      },
      {
        title: "Position",
        dataIndex: "position",
        className: "col-position",
      }
    ];

    return (
      <Table
        columns={columns}
        rowKey={Math.floor(Math.random() * 10).toString()}
        dataSource={this.props.concussionDataProp}
        pagination={false}
        loading={this.state.loading}
        onRow={(record: any) => {
          return {
            onClick: () => {
              this.props.history.push({
                pathname: `/athletes/${record.id}`,
              });
            },
          };
        }}
      />
      //
    );
  }
}

export default withRouter(withTranslation()(TableSorter));

但是编译时出现以下错误。Argument of type 'ComponentType<Pick<any, string | number | symbol>>' is not assignable to parameter of type 'ComponentClass<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any> | FunctionComponent<RouteComponentPro ps<any, StaticContext, PoorMansUnknown>> | (FunctionComponent<...> & ComponentClass<...>) | (ComponentClass<...> & FunctionComponent<...>)'. Type 'ComponentClass<Pick<any, string | number | symbol>, any>' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any> | FunctionComponent<RouteComponentProps<any, StaticCon text, PoorMansUnknown>> | (FunctionComponent<...> & ComponentClass<...>) | (ComponentClass<...> & FunctionComponent<...>)'. Type 'ComponentClass<Pick<any, string | number | symbol>, any>' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any>'. Construct signature return types 'Component<Pick<any, string | number | symbol>, any, any>' and 'Component<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any, any>' are incompatible. The types of 'props' are incompatible between these types. Type 'Readonly<Pick<any, string | number | symbol>> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<RouteComponentProps<any, StaticContext, PoorMansUnknown>> & Readonly<{ children?: ReactN ode; }>'. Type 'Readonly<Pick<any, string | number | symbol>> & Readonly<{ children?: ReactNode; }>' is missing the following properties from type 'Readonly<RouteComponentProps<any, StaticContext, PoorMansUnknown>>': histor y, location, match谁能帮我这个？

Answer 1

UPD

import React from "react"
import { withTranslation, WithTranslation } from "react-i18next"
import { RouteComponentProps, withRouter } from "react-router"

interface IProps {
    t: (arg: string) => string
}

class TableSorter extends React.Component<IProps & WithTranslation & RouteComponentProps, any> {
    state = {
        data: [],
        pagination: {},
        loading: false,
    }

    render() {
        return ...
    }
}

export default withTranslation()(withRouter(TableSorter))