Каков тип возврата Flow функционального компонента React без состояния?

Question

Если у меня есть что-то вроде этого

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

как я буду печатать, аннотировать возвращаемый тип с помощью Flow, т. е. что следует заменить /* ??? */ в коде ниже?

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

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

Answer 1

Тип возврата чистого компонента (который является тем же типом render функция нормального компонента) ?React$Element<any>,

Как вы можете прочитать в его определении React$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

В зависимости от вашего .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>

Answer 3

Оказывается, это React.Element, который является полиморфным типом (что я не уверен на 100%, что это значит), поэтому правильный (достаточный) код будет

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