将 Flowtype 与 react-css-modules 装饰组件一起使用

Question

下面是一个用于显示错误消息的简单组件：

// @flow
import styles from 'styles/components/Error';
import React from 'react';
import CSSModules from 'react-css-modules';

type Props = {
  message: string
}

const Error = ({ message }: Props) => {
  return (
    <div styleName="error">
      {message}
    </div>
  );
};

export default CSSModules(Error, styles);

请注意，它需要 message 属性。现在，如果我在某处使用此组件：

<Error />;

Flowtype 应该警告我缺少 Error 属性 message 但它没有。如果我不使用 react-css-modules 包装我的 Error 组件，Flowtype 会按预期工作。

我在想我需要为 Flowtype 声明一个类型以使其理解包装的组件，但我的 Google-fu 没有产生任何结果。

我发现了什么：

https://github.com/facebook/flow/issues/1601
Flow Type: HOC with cloneElement

Answer 1

最近在 GitHub 上对此进行了讨论。这是相关问题：https://github.com/facebook/flow/issues/2536

简而言之，问题是Flow没有CSSModules函数的任何类型信息，所以return类型被推断为any。

换句话说：

export default Error; // the type of this export is (_: P) => ?React$element<any>
export default CSSModules(Error, styles); // the type of this export is any

长话短说，您可以提供自己的类型定义。我将在此处粘贴@gcanti 在原始问题中建议的内容：

declare module 'react-css-modules' {

  declare type CssOptions = {
    allowMultiple?: boolean,
    errorWhenNotFound?: boolean,
  };

  declare type FunctionComponent<P> = (props: P) => ?React$Element<any>;
  declare type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;

  declare function exports<D, P, S, C: ClassComponent<D, P, S> | FunctionComponent<P>>(reactClass: C, styles: Object, cssOptions?: CssOptions): C;
}

将以上内容保存在 decls/react-css-modules.js 或类似的内容中，然后像这样配置 .flowconfig：

[libs]
decls/.js

这将在将组件包装到 CSSModules 中时保留类型信息，并允许流程捕获预期的错误。

将 Flowtype 与 react-css-modules 装饰组件一起使用

Using Flowtype with react-css-modules decorated components

javascript

reactjs

flowtype

react-css-modules