Was ist der Rückgabetyp Flow einer zustandslosen funktionalen Komponente React?

Question

Wenn ich so etwas wie diese

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

wie werde ich den Rückgabetyp mit Flow-Typ mit Anmerkungen versehen, das heißt, was /* ??? */ in dem folgenden Code ersetzen sollte?

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

Edit: This ist, was der Durchfluss docs über staatenlos Funktionskomponenten zu sagen hat. Ich bin vielleicht blind, aber ich kann dort nichts von einem Rückgabetyp sehen, nur Requisiten.

Answer 1

Der Rückgabetyp einer reinen Komponente sein (Dies ist der gleiche Typ der render Funktion einer normalen Komponente) ist ?React$Element<any>.

Wie Sie in its definitionReact$Element hat einen Typparameter lesen können Config, die nicht sehr nützlich, per se ist, und es ist nur für die Übereinstimmung mit der Definition von ReactClass.

So können Sie Ihre Definition als

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

geschrieben werden oder wenn Sie es vorziehen

import type { Element } from 'react' 

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

oder sogar

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

Stellt sich heraus, es ist React.Element, die eine ist polymorphic type (was ich nicht 100% sicher bin, was es bedeutet), so dass die korrekte (genug) Code würde

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

Answer 3

auf Ihrem .flowconfig Abhängig kann React$Element<any> als Rückgabetyp einstellen den folgenden Fehler werfen:

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

dies zu vermeiden, entweder keine Art passieren überhaupt:

type PropsType = { foo: string } 

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

Oder übergeben Sie einen props Typ alias statt any:

type PropsType = { foo: string } 

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