Stream error when passing props using stream-sorted higher-order elements

Consider the following code. Wrapper1

displays Wrapper2

, passing it a component Final

as a prop, as well as a couple of props, which ultimately Final

, finalProp

and w2prop

. Wrapper2

then passes the component passed into it, passing all of its props to that processed component. In this case, the component Final

gets rendered Wrapper2

and it gets the required props.

However, Flow doesn't understand this. I am getting the following two errors:

  • Property finalProp

    Property not found in object type See also: react elementWrapper2

  • Property w2prop

    Property not found in object type See also: react elementWrapper2

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 clearly knows what the Final

rendering is getting Wrapper2

. However, he does not understand that the required details are provided. I find this strange. If it can be said that props.component

in Wrapper2

there Final

, then I would expect him to know the fullness of that props

.

If I add finalProp

and w2prop

to type Wrapper2T

, then Flow is happy. But it is not a starter as it Wrapper2

should be a higher order component that is agnostic as to which component it ultimately renders.

Is there any other way that I should annotate these types of streams? Or another template for creating and rendering these components? I think what I have above is the standard model in React, so there must be some kind of solution.

+3
javascript reactjs higher-order-functions flowtype


source to share


No one has answered this question yet

See similar questions:

1
how to write type definition for HoC using stream

or similar:

463
What is the difference between state and props in Reacting?
195
Understanding React-Redux and mapStateToProps ()
eleven
Introducing reagents into the flow when transferring a component as a support
3
React higher order component by inline DOM element class
3
Generating a flow in the props of reacting components
2
Flow error "props are incompatible with empty" when instantiating a component without passing any props
2
Declare stream types for props added by third party component
1
How do I extend the pass types of material UI components using Flow when passing through props?
0
How do I add HTMLProps type props to a component using a stream in React?
0
Flow does not respect required props for higher order chained components (HOC)



All Articles
Loading...
X
Show
Funny
Dev
Pics