フロータイプ：HOC with cloneElement

Question

React.cloneElementを使用して子コンポーネントに余分な小道具を与える上位コンポーネントHocを作成しようとしています。私は余分な小道具が実際に渡されたことを知るためにflowtypeを得ることができませんでした。

以下は失敗した試みですが、オブジェクトのリテラルにfooタイプのエラーが見つかりません。私はこれを解決するために何ができるのか知りたいです。

type Props = { 
    foo: string, 
    bar: string, 
}; 

type DefaultProps = { 
    foo: string, 
}; 

declare class React2$Element<Config, DP> extends React$Element{ 
    type: _ReactClass<DP, *, Config, *>; 
} 


declare function Hoc<Config, DP: DefaultProps, R: React$Element<Config>>(props: {children: R}) : React2$Element<Config, DP> 

function TestComponent({foo, bar}: Props){ 
    return <div>{bar}</div>; 
} 


function Hoc(props){ 
    return React.cloneElement(props.children, {foo: 'form2wr'}); 
} 


function Test(){ 
    return <Hoc children={<TestComponent bar='yo' />}></Hoc>; 
} 

Answer 1

私はこの質問に対する回答はありませんが、回避策があります。

type Props = { 
    foo: string, 
    bar: string, 
}; 

type DefaultProps = { 
    foo: string, 
}; 

type WithHOCProps<X> = $Diff<X, DefaultProps> 

declare function TestComponent(props: WithHOCProps<Props>) : React$Element; 

function TestComponent({foo, bar}: Props){ 
    return <div>{foo + bar}</div>; 
} 


function Test(){ 
    return <TestComponent bar='yo' />; 
} 

Tadahhh、間違いなし。