如何在无状态功能组件上正确使用React.StatelessFunctionalComponent ？

Question

我需要为反应无状态功能组件添加流标注。 因此到文档我应该使用React.StatelessFunctionalComponent<Props>如何在无状态功能组件上正确使用React.StatelessFunctionalComponent <Props>？

其具有以下签名Ref.：

类型StatelessFunctionalComponent =（道具：道具）=> React.Node

但我接收若干errors 。

我在做什么错在这里，为什么？

// @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

Answer 1

我加入

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