Question

我有以下相当简单的React组件。

因为它是导航组件，所以我使用withRouter来访问RouterHistory对象。

我也在使用Flow进行输入，并且已经为flow-typed提交了react-router_v4

// @flow
import * as React from 'react';
import classnames from 'classnames';
import {withRouter} from 'react-router';
import type {RouterHistory} from 'react-router';

import '../sass/Link.scss';

type Props = {
  disabled?: boolean,
  href: string,
  className?: string,
  history: RouterHistory,
  children: *,
};

const Link = ({history, href, disabled, children, className}: Props) => (
  <span
    className={classnames(['link', className, {disabled}])}
    onClick={() => history.push(href)}>
    {children}
  </span>
);

Link.defaultProps = {
  className: '',
  disabled: false,
};

export default withRouter(Link);

运行Flow检查时，它会产生以下错误：

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ components/Link.jsx:17:14

Property className is missing in object type [1] but exists in Props [2] in the first argument.

     components/Link.jsx
      14│   children: *,
      15│ };
      16│
 [2]  17│ const Link = ({history, href, disabled, children, className}: Props) => (
      18│   <span
      19│     className={classnames(['link', className, {disabled}])}
      20│     onClick={() => history.push(href)}>
      21│     {children}
      22│   </span>
      23│ );
      24│
      25│ Link.defaultProps = {
      26│   className: '',

     flow-typed/npm/react-router_v4.x.x.js
 [1] 120│     Component: React$ComponentType<{| ...ContextRouter, ...P |}>


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ components/Link.jsx:17:14

Property disabled is missing in object type [1] but exists in Props [2] in the first argument.

     components/Link.jsx
      14│   children: *,
      15│ };
      16│
 [2]  17│ const Link = ({history, href, disabled, children, className}: Props) => (
      18│   <span
      19│     className={classnames(['link', className, {disabled}])}
      20│     onClick={() => history.push(href)}>
      21│     {children}
      22│   </span>
      23│ );
      24│
      25│ Link.defaultProps = {
      26│   className: '',

     flow-typed/npm/react-router_v4.x.x.js
 [1] 120│     Component: React$ComponentType<{| ...ContextRouter, ...P |}>

尝试破译错误消息，我尝试将导出更改为：

export default withRouter<Props>(Link);

但这只会产生错误：

Cannot call withRouter with Link bound to Component because function [1] is incompatible with statics of
React.Component [2].

我感觉我在这里遗漏了一些东西-似乎这里的所有输入都是多余的，但是我遇到了这些错误。我想念什么？

Answer 1

在您的Props类型中，className和disabled是可选的。但是后来，在组件中，您尝试使用它们而不检查它们是否存在：

className={classnames(['link', className, {disabled}])}

快速解决方案是仅检查这些值中的任何一个是否为空，如果为空，则为它们提供默认值。

const Link = ({history, href, disabled, children, className}: Props) => (
  <span
    className={classnames(['link', className ? className : '', {Boolean(disabled)}])}
    onClick={() => history.push(href)}>
    {children}
  </span>
);

类型检查器给您带来一些误导性错误：

对象类型[1]中缺少属性className，但在第一个参数的属性[2]中存在该属性。

对象类型[1]中缺少禁用的属性，但在第一个参数的属性[2]中存在。

我想这是由于参数的使用方式导致参数非空，然后发现它与Props的类型不匹配。

使用Flow类型时，react-router是否需要特定的指导？

1 个答案: