typescript - 使用 "withRouter"和 Typescript 时的类型问题

Question

我正在尝试在 React+Typescript 中获得更深入的知识和实践，并且在使用 withRouter 时遇到了这个打字错误。来自 react-router-dom .

我的代码片段非常简单，我试过找出有同样问题的人，其中一些答案指出升级时出错(但它们是 2016 年的，所以......)，其中一些正在使用connect()我没有使用的声明(这导致了一个问题，“我是否因为不使用它而做错了？”)。我看到其中一些建议还涉及将 Props 映射到 State，直到现在我还没有完成(也没有看到)。我希望有人对我缺少什么以及我应该注意什么提出一些建议。

代码是:

import React from "react";
import { withRouter } from "react-router-dom";

interface ISection {
  id: number;
  title: string;
  imageUrl: string;
  size: string;
}

class MenuItem extends React.Component<ISection> {
  render() {
    return (
      <div className={`${this.props.size} menu-item`}>
        <div
          className="background-image"
          style={{ backgroundImage: `url(${this.props.imageUrl})` }}
        />
        <div className="content">
          <h1 className="title">{this.props.title}</h1>
          <span className="subtitle">some subtitle</span>
        </div>
      </div>
    );
  }
}

export default withRouter(MenuItem);

我期望从这里顺利工作(我不得不说我首先尝试使用功能组件，因为我没有任何状态，但是我看到的所有解决方案都涉及一个类组件，所以我将其移入其中)，但我在 MenuItem 上收到以下错误在最后一行:

Argument of type 'typeof MenuItem' is not assignable to parameter of type 'ComponentClass<RouteComponentProps<any, StaticContext, any>, any> | FunctionComponent<RouteComponentProps<any, StaticContext, any>> | (FunctionComponent<RouteComponentProps<any, StaticContext, any>> & ComponentClass<...>) | (ComponentClass<...> & FunctionComponent<...>)'.
  Type 'typeof MenuItem' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext, any>, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'RouteComponentProps<any, StaticContext, any>' is missing the following properties from type 'Readonly<ISection>': id, title, imageUrl, sizets(2345)

我的问题是:

为什么说“输入‘typeof MenuItem’”？不应该只说'MenuItem'的类型而不是获取类型的函数吗？

withRouter 是否有必要与类组件一起工作，或者它也可以在功能组件上工作？

我需要connect()或将 Prop 映射到状态？如果是这样，为什么？

最后，我该如何解决这个问题？

Answer 1

截至 documentation , withRouter将通过更新match , location , 和 history每当它呈现时，就向包装的组件提供 Prop 。

所以MenuItem组件应该有 Prop 来接收它们。目前，MenuItem组件具有类型 ISection 的 Prop 其中不包括路由器 Prop 。

添加路由器 Prop 的最简单方法是相交ISection与 RouteComponentProps .

import { withRouter, RouteComponentProps } from "react-router-dom";

// ...
class MenuItem extends React.Component<ISection & RouteComponentProps> {

完整代码是

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

interface ISection {
    id: number;
    title: string;
    imageUrl: string;
    size: string;
}

class MenuItem extends React.Component<ISection & RouteComponentProps> {
    render() {
        return (
            <div className={`${this.props.size} menu-item`}>
                <div
                    className="background-image"
                    style={{ backgroundImage: `url(${this.props.imageUrl})` }}
                />
                <div className="content">
                    <h1 className="title">{this.props.title}</h1>
                    <span className="subtitle">some subtitle</span>
                </div>
            </div>
        );
    }
}

export default withRouter(MenuItem);

并回答您的问题

为什么说“输入‘typeof MenuItem’”？不应该只说'MenuItem'的类型而不是获取类型的函数吗？

错误由类型不兼容引起。 MenuItem是类，而不是类型。获取 MenuItem 的类型你应该使用 typeof MenuItem .所以typeof MenuItem是类型。编译器正确地说，“输入 typeof MenuItem”。

withRouter 是否有必要与类组件一起工作，或者它也可以在功能组件上工作？

允许使用类组件和功能组件。

如果实现为功能性组件，这就是您的组件的样子

const Cmp1: React.FunctionComponent<ISection & RouteComponentProps> = (props) => {
    return (
        <div className={`${props.size} menu-item`}>
            <div
                className="background-image"
                style={{ backgroundImage: `url(${props.imageUrl})` }}
            />
            <div className="content">
                <h1 className="title">{props.title}</h1>
                <span className="subtitle">some subtitle</span>
            </div>
        </div>
    );
}

const WrappedCmp = withRouter(Cmp1);

我需要connect()或将 Prop 映射到状态？如果是这样，为什么？

不，这不是严格的要求。 connect是 Redux 的一部分，所以如果你使用 Redux，你可以连接。这是documentation如何使用withRouter与 connect .但同样，这不是必需的。

最后，我该如何解决这个问题？

已经回答了。见上文:-)