एक प्रतिक्रिया stateless कार्यात्मक घटक के प्रवाह वापसी प्रकार क्या है?

Question

अगर मैं कुछ इस तरह

const RandomComponent = (props) => (
    <div> 
    <SomeSubComponent id={props.id} /> 
    <AnotherSubComponent type={props.type} /> 
    </div> 
) 

कैसे मैं प्रवाह के साथ वापसी प्रकार व्याख्या टाइप करेगा, जैसे कि, क्या नीचे कोड में /* ??? */ की जगह चाहिए?

const RandomComponent = (props: { id: string, vino: number): /* ??? */ => (
    <div> 
    <SomeSubComponent id={props.id} /> 
    <AnotherSubComponent veryImportantNumber={props.vino} /> 
    </div> 
) 

संपादित करें: This फ्लो डॉक्स क्या राज्यविहीन कार्यात्मक घटकों के बारे में क्या कहना है है। मैं अंधेरा हो सकता हूं, लेकिन मैं वहां वापसी प्रकार के बारे में कुछ नहीं देख सकता, केवल प्रो प्रकार।

Answer 1

एक शुद्ध घटक के वापसी प्रकार होगा (जो एक सामान्य घटक के render फ़ंक्शन का एक ही प्रकार है) ?React$Element<any> है।

आप its definitionReact$Element में पढ़ सकते हैं के रूप में एक प्रकार पैरामीटर Config जो बहुत उपयोगी से प्रति नहीं दे रहा है और यह वहाँ केवल ReactClass की परिभाषा के साथ स्थिरता के लिए है।

तो अपनी परिभाषा के रूप में

const RandomComponent = (props: { id: string, vino: number }): React$Element<any> => (
    <div> 
    <SomeSubComponent id={props.id} /> 
    <AnotherSubComponent veryImportantNumber={props.vino} /> 
    </div> 
) 

लिखा जा सकता है या यदि आप पसंद

import type { Element } from 'react' 

const RandomComponent = (props: { id: string, vino: number }): Element<any> => (
    <div> 
    <SomeSubComponent id={props.id} /> 
    <AnotherSubComponent veryImportantNumber={props.vino} /> 
    </div> 
) 

या यहाँ तक कि

import React from 'react' 

const RandomComponent = (props: { id: string, vino: number }): React.Element<any> => (
    <div> 
    <SomeSubComponent id={props.id} /> 
    <AnotherSubComponent veryImportantNumber={props.vino} /> 
    </div> 
) 

Answer 2

बाहर कर देता है यह React.Element है, जो है एक polymorphic type (जो मैं 100% यकीन है कि इसका क्या मतलब नहीं कर रहा हूँ), इसलिए सही (पर्याप्त) कोड

const RandomComponent = (props: { id: string, vino: number): React.Element<*> => (
    <div> 
    <SomeSubComponent id={props.id} /> 
    <AnotherSubComponent veryImportantNumber={props.vino} /> 
    </div> 
) 

Answer 3

अपने .flowconfig के आधार पर, वापसी प्रकार के रूप में React$Element<any> की स्थापना कर सकते हैं निम्न त्रुटि फेंक दें:

error Unexpected use of weak type "any" flowtype/no-weak-types

इससे बचने के लिए, या तो सभी में कोई प्रकार पारित:

type PropsType = { foo: string } 

const Baz = (props: PropsType): React$Element => 
    <h1>Hello, { props.foo }</h1> 

या, any के बजाय, एक props प्रकार उर्फ ​​पारित: क्यों आप निर्दिष्ट करने के लिए चाहते हैं

type PropsType = { foo: string } 

const Baz = (props: PropsType): React$Element<PropsType> => 
    <h1>Hello, { props.foo }</h1>