如何实现原型

时间:2018-09-04 00:24:14

标签: reactjs react-proptypes

我是新来的人,所以要好心:)

仅尝试获取道具类型进行验证。我在控制台中没有看到任何错误。我花了很多时间,似乎无法超越。任何援助将不胜感激。代码如下:

import PropTypes from 'prop-types'
import { MdTerrain } from 'react-icons/md/'
import { TiWeatherSnow } from 'react-icons/ti/'
import { FaCalendar } from 'react-icons/fa/'
import '../stylesheets/ui.scss'



const percentToDecimal = (decimal) => {
    return((decimal * 100) + '%')
}

const calcGoalProgress = (total, goal) => {
    return percentToDecimal(total/goal)
}




export const SkiDayCount = ({total, powder, backcountry, goal}) =>  (
    <div className="ski-day-count">
        <div className="total-days">
            <span>{total}</span>
            <FaCalendar />
            <span>days</span>
        </div>
        <div className="powder-days">
            <span>{powder}</span>
            <TiWeatherSnow />
            <span>days</span>
        </div>
        <div className="backcountry-days">
            <span>{backcountry}</span>
            <MdTerrain />
            <span>days</span>
        </div>
        <div>
            <span>{calcGoalProgress(total, goal)}</span>
        </div>
    </div>
)


SkiDayCount.defaultProps = {
    total:'sdf',
    powder:10,
    backcountry:15,
    goal:75
}

SkiDayCount.propTypes = {
    total: PropTypes.number.isRequired,
    powder: PropTypes.number,
    backcountry: PropTypes.number
}

1 个答案:

答案 0 :(得分:0)

您已检查自己是否处于开发模式。出于性能原因,仅在开发模式下检查propTypes。Check here