Flowtype Verwendung mit reagieren-CSS-Module eingerichtet Komponenten

Question

Nachfolgend finden Sie eine einfache Komponente Fehlermeldungen für die Ansicht:

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

Beachten Sie, dass es message Eigenschaft erfordert. Nun, wenn ich diese Komponente verwenden irgendwo:

<Error />; 

Flowtype sollte mich warnen, dass Error fehlt erforderliche Eigenschaft message aber es funktioniert nicht. Wenn ich meine Error Komponente nicht mit react-css-Modulen umschließe, funktioniert Flowtype wie erwartet.

Ich denke, dass ich einen Typ für Flowtype deklarieren muss, um verpackte Komponenten zu verstehen, aber mein Google-Fu lieferte keine Ergebnisse.

Was ich gefunden habe:

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

Answer 1

Dies wurde auf GitHub kürzlich diskutiert. Hier ist das relevante Problem: https://github.com/facebook/flow/issues/2536

Kurz gesagt, das Problem ist, dass Flow keine Typinformationen für die CSSModules Funktion hat, so dass der Rückgabetyp als any abgeleitet wird.

Mit anderen Worten:

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 

Lange Rede kurzer Sinn, können Sie Ihre eigene Art Definition liefern. Ich werde hier den einen von @gcanti in der ursprünglichen Ausgabe vorgeschlagen einfügen:

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

Speichern Sie die in decls/react-css-modules.js oder etwas über ähnliche und konfigurieren Sie Ihre .flowconfig wie:

[libs] 
decls/.js 

Dies wird die Art erhalten Informationen beim Umhüllen einer Komponente in CSSModules und ermöglichen den Fluss die beabsichtigten Fehler zu fangen.