在將組件作爲道具傳遞時在組件中鍵入React組件

Question

我想將React組件作爲輸入prop傳遞給另一個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') 
) 

但是在App渲染方法我得到的錯誤

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

我應該如何正確打字輸入組件？

Answer 1

既然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> 
    ) 
    } 
} 

Here is a working example for 0.59.0。正如評論中提到的那樣，有a description of the changes here。

:: v0.59.0 ::

之前，您應該使用的ReactClass<*>代替React.Component。

這是working example，文檔是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>;