2017-04-24 80 views
9

Başka bir React bileşenine giriş prop olarak bir React bileşenini aktarmak istiyorum. React.Component < *, *, *> olarak başvurmaya çalıştım, ancak geçirilen bileşeni render yönteminde kullandığımda bir hata alıyorum. Akış kodumu böyle yazdım. Uygulama hale yöntemde AncakBir bileşenin bir yayın olarak aktarılması sırasında Akıştaki React bileşenlerinin yazılması

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

ben düzgün girdi bileşenlerini yazmalısınız nasıl hata

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

olsun?

cevap

11

v0.59.0'dan beri React.Component'i kullanmalısınız. Örneğin: 0.59.0 için

Here is a working example. Yorumlarda belirtildiği gibi, a description of the changes here vardır.

:: v0.59.0 ::

Önce ReactClass<*> yerine React.Component ait kullanmalıdır.

İşte bir working example ve belge 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>; 
+1

Örnek artık çalışmıyor gibi görünüyor ve dokümanlardaki "ReactClass" ile ilgili bir şey bulamıyorum. Bu sorunun daha eski bir akış versiyonu için geçerli olması mümkün mü? – fraxture

+1

Gerçekten de, ReactClass kaldırılmış görünüyor: https://github.com/facebook/flow/commit/20a5d7dbf484699b47008656583b57e6016cfa0b#diff-5ca8a047db3f6ee8d65a46bba4471236L136 – thejohnbackes

+1

Şimdi türüne benziyor React.ComponentType . Değişimin dökümantasyonu için ne dediğinizi tahmin ediyorum: https://github.com/facebook/flow/commit/20a5d7dbf484699b47008656583b57e6016cfa0b#diff-5ca8a047db3f6ee8d65a46bba4471236L136 – thejohnbackes