flowtype - 流类型 : HOC with cloneElement

Question

我正在尝试创建一个高阶组件 Hoc，它通过 React.cloneElement 为其子组件提供一些额外的 Prop 。我一直无法让 flowtype 知道额外的 Prop 实际上已经被传递了下来。

下面是我失败的尝试，抛出错误 foo type cannot be found on object literal。我想知道我能做些什么来解决这个问题。

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，没有错误。