反応-CSS-モジュール飾ら成分とFlowtypeを使用

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が欠落していることを私に警告しなければならないが、それはしません。 Errorコンポーネントをreact-css-modulesでラップしないと、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関数のタイプ情報がないため、戻りタイプは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 

かいつまんで、あなた自身の型定義を提供することができます。これは、タイプを保持します

[libs] 
decls/.js 

：decls/react-css-modules.jsまたは類似した何かに

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; 
} 

保存以上、その後のようなあなたの.flowconfigを設定します。私はここで、元の問題に@gcantiによって提案されたものを貼りますコンポーネントをCSSModulesにラップして、フローが意図したエラーをキャッチするときの情報。