प्रोप

Question

के रूप में एक घटक को पार करते समय फ़्लो में प्रतिक्रिया घटक घटाना टाइप करना मैं एक प्रतिक्रिया घटक को अन्य प्रतिक्रिया घटक के इनपुट प्रोप के रूप में पास करना चाहता हूं। मैंने इसे 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) 

मैं कैसे ठीक से इनपुट घटक टाइप चाहिए?

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 0.59.0 के लिए। जैसा कि टिप्पणियों में बताया गया है, a description of the changes here है।

:: v0.59.0 ::

इससे पहले कि आप React.Component के बजाय ReactClass<*> उपयोग करना चाहिए।

यहां एक 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>;