2

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

// @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，但事实并非如此。如果我不Error使用 react-css-modules 包装我的组件，Flowtype 会按预期工作。

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

我所做的发现：

4

1 回答 1

1

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

简而言之，问题在于 Flow 没有任何CSSModules函数的类型信息，因此返回类型被推断为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并允许流程捕获预期的错误。

于 2016-10-03T15:47:31.590 回答