Flow: React.ComponentType in the Type Reference doc

Created on 1 Sep 2017  路  2Comments  路  Source: facebook/flow

In the doc Type Reference it mentions React.ComponentType. In my react 15.6.1 project the following code doesn't compile

// @flow
import React from 'react'

const faded = <P>(componentKlass : React.ComponentType<P>) => class extends React.Component<P> {
    render() {
        return <div></div>
    }
}

export default faded

I was writing a higher-order component following this HOC guide

I don't know where to look for the React.ComponentType, it not here

Another question is can <*> be used to make the Props type inferred?

screen shot 2017-09-01 at 11 18 29 pm

Most helpful comment

You need to import React as a namespace or import the type explicitly.

So either import * as React from "react" or import type {ComponentType} from "react".

See https://flow.org/en/docs/react/types/.

All 2 comments

You need to import React as a namespace or import the type explicitly.

So either import * as React from "react" or import type {ComponentType} from "react".

See https://flow.org/en/docs/react/types/.

Changed to

// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { CSSTransitionGroup } from 'react-transition-group';
import './faded.css';

export const FirstChild = (props: any) => {
  const children = React.Children.toArray(props.children);
  return children[0] || null;
};

const faded = (componentKlass: ComponentType<*>) =>
  class extends React.Component<*> {
    render() {
      return (
        <CSSTransitionGroup
          transitionName="fade"
          transitionAppear={false}
          transitionAppearTimeout={1500}
          transitionEnter={true}
          transitionEnterTimeout={500}
          transitionLeaveTimeout={500}
          component={FirstChild}
        >
        {this.props.shouldRender ? 
          <componentKlass {...this.props} /> : null}
        </CSSTransitionGroup>
      );
    }
  };

export default faded;

flow will raise error for <componentKlass {...this.props}/>

Warning: Unknown props onCancel, cities, shouldRender on tag. (onCancel & cities are used by the decorated component.)

After changing it to ComponentKlass it doesn't complain.

Edit 1

After reading
http://www.thedreaming.org/2017/04/28/es6-imports-babel/
https://stackoverflow.com/questions/42051588/wildcard-or-asterisk-vs-named-or-selective-import-es6-javascript
https://stackoverflow.com/questions/32236163/when-to-use-import-as-foo-versus-import-foo

I know that ComponentType is not a property of React(the default export of react).

Edit 2

Here's a related issue: https://github.com/facebook/flow/issues/2630

Edit 3

componentKlass should be capitalized, or be changed toComponents

Was this page helpful?
0 / 5 - 0 ratings