Каков тип возвращаемого потока функционального компонента «Реагировать без состояния»?

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> 
) 

Edit: This является то, что документы потока должен сказать о апатридов функциональных компонентов. Я могу быть слепым, но я ничего не вижу о типе возврата, только типы prop.

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> 

Или передать props псевдоним типа, а any:

type PropsType = { foo: string } 

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