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

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

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 говорит о функциональных компонентах без сохранения состояния. . Я могу быть слепым, но я ничего не вижу о возвращаемом типе, только про типы.


reactjs javascript flowtype static-typing typing
person ahstro    schedule 03.11.2016    source источник
comment
Почему вы хотите указать тип возвращаемого значения? Это компонент, поэтому разве вы не всегда возвращаете его элементы?   -  person César Landesa    schedule 03.11.2016
comment
Я хотел бы сделать это из-за согласованности с другими объявлениями функций и потому, что иногда компонент может возвращать null или компонент, но вопрос на самом деле из любопытства, и я полагаю, что на самом деле это тип блока JSX / возвращаемый тип React.createElement?   -  person ahstro    schedule 03.11.2016

Ответы (3)


arrow_upward
12
arrow_downward

Тип возвращаемого значения чистого компонента (который совпадает с типом функции 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>
)
person Gabriele Petronella    schedule 03.11.2016
comment
Обычно any считается внутренним типом компонента. Но если вы используете функциональный компонент без сохранения состояния со стрелочными функциями, сложно понять, что там использовать? - person CMCDragonkai; 29.07.2019

arrow_upward
1
arrow_downward

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

const RandomComponent = (props: { id: string, vino: number): React.Element<*> => (
  <div>
    <SomeSubComponent id={props.id} />
    <AnotherSubComponent veryImportantNumber={props.vino} />
  </div>
)
person ahstro    schedule 03.11.2016
comment
обратите внимание, что React.Element не является допустимым типом. Фактический тип, который вы можете использовать, это React$Element<*>. - person Gabriele Petronella; 03.11.2016
comment
Сначала я нашел React$Element, но затем просмотрел исходный код потока и обнаружил, что он используется как React.Element. Есть идеи, почему? - person ahstro; 03.11.2016
comment
Интересно. Я думаю, вы можете использовать его, если React импортируется, тогда - person Gabriele Petronella; 03.11.2016
comment
Добавлено к моему ответу - person Gabriele Petronella; 03.11.2016

arrow_upward
1
arrow_downward

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