时间戳

首页 > 解决方案 > react-router 在使用 Flow 类型时是否需要特定的指导？

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

问题描述

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

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

标签： javascriptreactjsreact-routerflowtype

解决方案

在您的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.

推荐阅读