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

Question

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

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

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

// @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}])}

快速修复是检查这些值中的任何一个是否为 null，如果它们是 null，则给它们默认值:

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

类型检查器给你一些误导性错误:

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

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

我猜它是根据参数的使用方式推断参数是非空的，然后发现这与 Props 的类型不匹配。