흐름 유형 고차 성분 (HOC) 소품 유형 보존

나는이 벽에 내 머리를 부딪 히고 있습니다. 일부 반응 프로젝트에 flowtype을 통합하려고합니다. 대부분의 경우 타이핑이 잘 작동하는 것 같습니다. 그러나, 당신의 구성 요소에 스타일 시트 클래스를 주입하기 위해 HOC를 사용하는 라이브러리 (react-jss)를 사용하고 있습니다. 문제는이 모듈에 흐름 입력이 없으므로 모든 구성 요소가이 HOC로 래핑되므로 내 구성 요소에 대한 소품 유효성 검사를 날려 버릴 수 있다는 것입니다.흐름 유형 고차 성분 (HOC) 소품 유형 보존

내가 본 일부 github isuses를 기반으로 일부 타이핑을 추가 할 수 있었으므로 적어도 반응 - 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>

출처

2017-03-10 Mike

당신이 할 수있는 다음 정의를 시도하십시오.

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

나는 잘 모르겠지만,이 설정은 나를 위해 잘 작동합니다.

출처

2017-06-28 00:46:11

흐름 유형 고차 성분 (HOC) 소품 유형 보존

답변

관련 문제