フロータイプ高次コンポーネント（HOC）の小道具タイプの保存

Question

私はこの壁の壁に対して頭を叩いています。私はいくつかの反応プロジェクトにフロータイプを取り入れようとしています。ほとんどの場合、タイピングはうまくいくようです。しかし、私はあなたのコンポーネントにスタイルシートのクラスを注入するためにHOCを使用するライブラリ（react-jss）を使用しています。問題は、このモジュールにはフロータイピングがないため、すべてのコンポーネントがこのHOCでラップされているため、コンポーネントでの小道具の検証が吹き飛ばされることです。

私が見たいくつかのgithubのisusesに基づいていくつかのタイピングを追加することができたので、少なくとも私はreact-jss HOCからコンポーネントを取得していることを知っていますが、フローの観点からは、必要な小道具や間違ったタイプの小道具を提供できなかったためにエラーが出ることはありません（フローのメリットはほとんどありません）。反応-JSSデフォルトのエクスポート（injectStyles）についてrought署名がこれです

declare type FunctionComponent<A> = (props: A) => ?React$Element<any>; 

declare type ClassComponent<D, A, S> = Class<React$Component<D, A, S>>; 

declare type Component<A> = FunctionComponent<A> | ClassComponent<any, A, any>; 

declare type Fn1<A, B> = (a: A) => B; 

declare type HOC<A, B> = Fn1<Component<A>, Component<B>>; 

declare module 'react-jss' { 
    declare module.exports: (styleSheet: Object) => HOC<A, B>; 
} 

は覚えておいてください：ここで私は、基本的な反応-JSS HOCの定義を取得するために貼り付けコピー何

function injectStyles(styleSheet: AnObject)(Component: ReactComponent<Props>): ReactComponent<PropsWithStyleClasses> 

Answer 1

することができます次の定義を試してください：

declare module 'react-jss' { 
    // Export these 
    declare type FunctionComponent<P> = (props: P) => ?React$Element<any>; 
    declare type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>; 

    declare type Klasses<CSS> = { 
    [classname: $Keys<CSS>]: string, 
    }; 

    declare type JSSProps<CSS> = { 
    classes: Klasses<CSS>, 
    sheet: { 
     attached: boolean, 
     classes: Klasses<CSS>, 
     deployed: boolean, 
     linked: boolean, 
     options: Object, 
     renderer: mixed, 
     rules: mixed, 
    }, 
    }; 

    declare type Injector = { 
    <Props, State, DefaultProps, CSS>(component: ClassComponent<DefaultProps, Props, State>): ClassComponent<DefaultProps, $Diff<Props, JSSProps<CSS>>, void>; 
    <Props, CSS>(component: FunctionComponent<Props>): FunctionComponent<$Diff<Props, JSSProps<CSS>>>; 
    }; 

    declare function exports<Props, State, DefaultProps, CSS>(
    CSS: CSS, 
): Injector 
} 

注入されたコンポーネントをインポートするときに、フローに問題があることに注意してください。クラスのすべてのものを使用する場合は正常に動作します：

// Test.js 
class Test extends React.Component<void, { text: string }, void> { 
    ... 
} 
export const StyledTest = injectSheet(style)(Test) 

// Main.js 
... 
render() { 
    return <StyledTest /> // ERROR here, missing `text` prop 
} 

しかし、機能コンポーネントの

は、明示的にそれを入力する必要があります。これらの問題は、流れの中で固定した場合

// Test.js 
const Test = (props: { text: string }) => { 
    ... 
} 
export const StyledTest: FunctionComponent<{ text: string }> = injectSheet(style)(Test) // Explicitly type this 

// Main.js 
... 
render() { 
    return <StyledTest /> // ERROR here, so it works! 
} 

私はわからないんだけど、この設定は、私のためにうまく動作します。