问题在将组件作为prop传递时，在Flow中键入React组件

我想将React组件作为输入prop传递给另一个React组件。我试图将它引用为React.Component <*，*，*>但是当我在render方法中使用传递的组件时，我得到一个错误。这就是我写出流程代码的方式。

/* @flow */

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const Input = props => <div>Yo</div>

type DefaultProps = {
  InputComponent: Input
};

type Props = {
  InputComponent: React.Component<*, *, *>
};

class App extends Component<DefaultProps, Props, void> {
  static defaultProps = {
    InputComponent: Input
  };

  props: Props;

  render() {
    const { InputComponent } = this.props

    return (
      <div>
        <InputComponent />
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

但是在App渲染方法中我得到了错误

React element `InputComponent` (Expected React component instead of React$Component)

我该如何正确输入输入组件？

9437

2018-04-24 08:00

起源

答案:

从v0.59.0开始，你应该使用React.Component。例如：

/* @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>
    )
  }
}

这是一个有效的例子为0.59.0。正如评论中所提到的那样这里的变化描述。

::在v0.59.0之前::

你应该用 ReactClass<*> 代替 React.Component。

这里有一个工作实例，文档是这里！

/**
 * 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>;

2018-05-22 18:15

这个例子似乎不再起作用了，我找不到任何关于它的东西 ReactClass 在文档中。这个问题可能适用于旧版本的流程吗？ - fraxture

实际上，似乎ReactClass被删除了： github.com/facebook/flow/commit/... - thejohnbackes

现在看起来类型是React.ComponentType <Props>。以下是我猜您可能称之为变更的文档： github.com/facebook/flow/commit/... - thejohnbackes

看起来现在React Components应该只是React.Component，但我还没有测试过新版本。 - thejohnbackes

这也看起来像转变的良好背景： medium.com/flow-type/... - fraxture

答案: