流类型:HOC与cloneElement [英] Flow Type: HOC with cloneElement

问题描述

我正在尝试创建一个更高阶的组件Hoc，该组件通过React.cloneElement为其子级提供一些额外的道具.我无法让flowtype知道这些多余的道具实际上已经被传下来了.

I am trying to create a higher order component, Hoc, that gives its children some extra props through React.cloneElement. I have not been able to get flowtype to know that the extra props were in fact passed down.

以下是我的失败尝试，该错误引发错误foo类型，而在对象常量上找不到.我想知道如何解决这个问题.

Below is my failed attempt, which throws the error foo type cannot be found on object literal. I would like to know what I can do to fix this.

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

推荐答案

我没有这个问题的答案，但是我有解决方法.

I don't have an answer to this question, but I do have a workaround.

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

Tadahhh, no errors.

这篇关于流类型:HOC与cloneElement的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！