使用流動型反應與CSS的模塊裝飾部件

下面是表示錯誤消息的簡單組件：使用流動型反應與CSS的模塊裝飾部件

// @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 />;

流動型應該提醒我，Error缺少必需的屬性message但事實並非如此。如果我不使用react-css-modules封裝我的Error組件，Flowtype按預期工作。

我在想，我需要爲FlowType聲明一個類型來理解包裝的組件，但是我的Google-fu沒有得到任何結果。

我也發現：

來源

2016-10-03 pikku-h

這是最近在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-03 15:47:31

使用流動型反應與CSS的模塊裝飾部件

回答

相關問題