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

【问题标题】：Does react-router need specific guidance when using Flow types?react-router 在使用 Flow 类型时是否需要特定的指导？
【发布时间】：2018-12-30 08:32:36
【问题描述】：

我有以下相当简单的 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].

我觉得我在这里遗漏了一些东西 - 似乎这里的打字都是光明正大的，但我收到了这些错误。我错过了什么？

【问题讨论】：

标签： javascript reactjs react-router flowtype

【解决方案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，但在第一个参数的 Props [2] 中存在。

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

我猜这是推断参数是非空的，因为它们是如何使用的，然后发现这与 Props 的类型不匹配。

【讨论】：