Typing React components in Flow when passing a component as a prop
Since v0.59.0, you should use React.Component. For example:
/* @flow */
import React from 'react';
const Input = props => <div>Yo</div>
type Props = {
InputComponent: React.Component<*, *>
};
class App extends React.Component<Props, void> {
static defaultProps = {
InputComponent: Input
};
render() {
const { InputComponent } = this.props
return (
<div>
<InputComponent />
</div>
)
}
}
Here is a working example for 0.59.0. As mentioned in the comments, there is a description of the changes here.
:: Before v0.59.0 ::
You should use ReactClass<*>
instead of React.Component
.
Here is a working example, and the documentation is here!
/**
* Type of a React class (not to be confused with the type of instances of a
* React class, which is the React class itself). A React class is any subclass
* of React$Component. We make the type of a React class parametric over Config,
* which is derived from some of the type parameters (DefaultProps, Props) of
* React$Component, abstracting away others (State); whereas a React$Component
* type is useful for checking the definition of a React class, a ReactClass
* type (and the corresponding React$Element type, see below) is useful for
* checking the uses of a React class. The required constraints are set up using
* a "helper" type alias, that takes an additional type parameter C representing
* the React class, which is then abstracted with an existential type (*). The *
* can be thought of as an "auto" instruction to the typechecker, telling it to
* fill in the type from context.
*/
type ReactClass<Config> = _ReactClass<*, *, Config, *>;
type _ReactClass<DefaultProps, Props, Config: $Diff<Props, DefaultProps>, C: React$Component<DefaultProps, Props, any>> = Class<C>;