Flow error when passing props through flow-typed higher ordered components

问题

Consider the following code. Wrapper1 renders Wrapper2, passing into it the Final component as a prop, along with a couple props that Final ultimately expects, finalProp and w2prop. Wrapper2 then renders the component passed into it, passing along all its props to that rendered component. In this case, the Final component is getting rendered by Wrapper2, and it is receiving its needed props.

However, Flow does not understand this. I'm receiving the following two errors:

1. property finalProp Property not found in object type See also: React element Wrapper2
2. property w2prop Property not found in object type See also: React element Wrapper2

type FinalT = {
  finalProp: number,
  w2prop: number,
};

function Final(props: FinalT): React.Element<*> {
  return (
    <div>
      {props.finalProp}
      {props.w2prop}
    </div>
  );
}

export default function Wrapper1(): React.Element<*> {
  return (
    <Wrapper2
      component={Final}
      finalProp={7}
      w2prop={7}
    />
  );
}

type Wrapper2T = {
  component: (*) => React.Element<*>,
};

function Wrapper2(props: Wrapper2T): React.Element<*> {
  const Cmp = props.component;

  return <Cmp {...props} />;
}

Based on the error message, Flow obviously understands that Final is getting rendered by Wrapper2. However, it fails to realize that the necessary props are being provided. I find this strange. If it can tell that props.component in Wrapper2 is Final, then I'd expect it to know the full scope of what's in props.

If I add finalProp and w2prop to the type Wrapper2T, then Flow is happy. But that's a non-starter, since Wrapper2 is supposed to be a higher order component that is agnostic about what component it ultimately renders.

Is there a different way I'm supposed to annotate these flow types? Or a different pattern for creating & rendering these components? I think what I have above is a standard pattern in React, so there must be some solution.

来源：https://stackoverflow.com/questions/43267391/flow-error-when-passing-props-through-flow-typed-higher-ordered-components