Even Better Support for React in Flow
Caleb Meredith
6K16

function injectProp<Props: {}>(
Component: React.ComponentType<{ foo: number } & Props>,
): React.ComponentType<Props> {
return function WrapperComponent(props: Props) {
return <Component {...props} foo={42} />;
};
}
class MyComponent extends React.Component<{
a: number,
b: number,
foo: number,
}> {}
const MyEnhancedComponent = injectProp(MyComponent);
// We don't need to pass in `foo` even though
// `MyComponent` requires it!
<MyEnhancedComponent a={1} b={2} />;

I am a little bit confused about the example of React.ComponentType usage that you provided.

Is Props in injectProp function a keyword/variable? I don’t see it declared anywhere: MyComponent just straight up passes in a type object as a prop, without first assigning it to a variable like in many other examples. Does that mean injectProps written as it is can take any component with any prop type.

Like what you read? Give Quang Tran a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.