Flow Type：HOC with cloneElement

Question

我試圖創建一個更高階的組件Hoc，它通過React.cloneElement給它的子項增加一些額外的道具。我一直無法獲得流式類型來知道這些額外的道具事實上已經傳下來了。

下面是我失敗的嘗試，這引發錯誤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，沒有錯誤。