Как правильно использовать React.StatelessFunctionalComponent <Props> на функциональном компоненте без состояния?

Question

Как правильно использовать React.StatelessFunctionalComponent <Props> на функциональном компоненте без состояния?

1

Мне нужно добавить аннотацию потока для реагирующего функционального компонента без состояния. В соответствии с документами я должен использовать React.StatelessFunctionalComponent<Props>

Которая имеет следующую подпись Ref. :

type StatelessFunctionalComponent = (реквизит: реквизит) => React.Node

Но я получаю несколько ошибок.

Что я делаю неправильно здесь и почему?

// @flow
import * as React from 'react'
import moment from 'moment'
import IconWeather from '../../shared/icon/IconWeather'

/* eslint-disable no-undef */
type PropsType = {
  +date: number,
  +tempMin: number,
  +tempMax: number,
  +iconCode:number,
  +weatherDescription:string
}
/* eslint-enable no-undef */

const ForecastDay = ({ date, tempMin, tempMax, iconCode, weatherDescription }:PropsType):React.StatelessFunctionalComponent<PropsType> => {
  const dateFormat = moment.unix(date).format('ddd, MMM D')
  const tempMinRounded = Math.round(tempMin)
  const tempMaxRounded = Math.round(tempMax)
  return (
    <div>
      <div>{dateFormat}</div>
      <div>
        <IconWeather code={iconCode} />
      </div>
      <div>
        <div>
          {tempMinRounded}&#176;
        </div>
        <div>
          {tempMaxRounded}&#176;
        </div>
      </div>
      <div>
        {weatherDescription}
      </div>
    </div>
  )
}
export default ForecastDay

GibboK 22 сен. 2017, в 15:19

Источник

Теги:

javascript

flowtype

1 ответ

Ещё вопросы

GibboK · Accepted Answer · 2017-09-22T10-24-00.000Z

Я нашел решение своей проблемы, добавив

 const ForecastDay:React.StatelessComponent<PropsType>

и использовать в качестве возвращаемого типа ReactElement<any> или React.Element<*>.

// @flow
import * as React from 'react'
import moment from 'moment'
import IconWeather from '../../shared/icon/IconWeather'

/* eslint-disable no-undef */
type PropsType = {
  +date: number,
  +tempMin: number,
  +tempMax: number,
  +iconCode:number,
  +weatherDescription:string
}
/* eslint-enable no-undef */

const ForecastDay:React.StatelessComponent<PropsType> = ({ date, tempMin, tempMax, iconCode, weatherDescription }:PropsType):ReactElement<any> => {
  const dateFormat = moment.unix(date).format('ddd, MMM D')
  const tempMinRounded = Math.round(tempMin)
  const tempMaxRounded = Math.round(tempMax)
  return (
    <div>
      <div>{dateFormat}</div>
      <div>
        <IconWeather code={iconCode} />
      </div>
      <div>
        <div>
          {tempMinRounded}&#176;
        </div>
        <div>
          {tempMaxRounded}&#176;
        </div>
      </div>
      <div>
        {weatherDescription}
      </div>
    </div>
  )
}
export default ForecastDay