Ввод реагентов в поток при передаче компонента в качестве опоры

Я хочу передать компонент React в качестве входной подсказки другому компоненту React. Я попытался ссылаться на него как на React.Component <*, *, *>, но когда я использую переданный компонент в методе рендеринга, я получаю сообщение об ошибке. Вот как я написал код потока.

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

Однако в методе рендеринга приложения я получаю ошибку

React element 'InputComponent' (Expected React component instead of 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> ) } }

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

Ответ 1