Question

目前我正在使用以下代码来注释对象解构（内联）

我想知道是否有更简洁的表单，例如不使用内联注释。

你能告诉我一个例子吗？

＆＃13;

// @flow
import React from 'react'
import moment from 'moment'
import IconWeather from '../../shared/icon/IconWeather'

const ForecastDay = ({ date, tempMin, tempMax, iconCode, weatherDescription }:{+date:Date, +tempMin: number, +tempMax: number, +iconCode:string, +weatherDescription:string }) => {
  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

＆＃13;

Answer 1

我找到了一种可能的解决方案，将注释分离为单独的类型。

如果您有更好的解决方案，请向我汇报，我想了解更多。

我正在使用的代码：

＆＃13;

// @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) => {
  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

＆＃13;

如何使用FlowType和ES6对简洁的对象解构进行注释？

1 个答案: