Quel est le type de retour de flux d'un composant fonctionnel sans état React?

Question

Si j'ai quelque chose comme ça

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

comment vais-je taper annoter le type de retour avec un débit, à savoir, ce qui devrait remplacer /* ??? */ dans le code ci-dessous?

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

Edit: This est ce que les documents de flux a à dire sur les composants fonctionnels sans état. Je peux être aveugle, mais je ne vois rien sur un type de retour, seulement des types de prop.

Answer 1

Le type de retour d'un composant pur (qui est le même type de la fonction render d'un composant normal) est ?React$Element<any>.

Comme vous pouvez le lire dans its definitionReact$Element a un paramètre de type Config qui n'est pas très utile en soi et il est là que pour la cohérence avec la définition de ReactClass.

Ainsi, votre définition peut être écrite comme

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

ou si vous préférez

import type { Element } from 'react' 

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

ou même

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

Turns out il est React.Element, qui est un polymorphic type (que je ne suis pas 100% sûr de ce que cela signifie), de sorte que le bon code (assez) serait

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

Answer 3

En fonction de votre .flowconfig, la mise en React$Element<any> comme type de retour peut Lancez l'erreur suivante:

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

Pour éviter cela, passer aucun type du tout:

type PropsType = { foo: string } 

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

Ou, passer un alias de type props, au lieu de any:

type PropsType = { foo: string } 

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