Reactjs 如何实现proptype

我是新来的，所以要友善：）

只是尝试让道具类型进行验证。我没有在控制台中看到任何错误。我已经花了很多时间，似乎无法克服这一点。任何协助都将不胜感激。代码如下：

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
}

从“道具类型”导入道具类型
从“react icons/md/”导入{MdTerrain}
从'react icons/ti/'导入{TiWeatherSnow}
从“react icons/fa/”导入{FaCalendar}
导入“../stylesheets/ui.scss”
常量百分比小数=（小数）=>{
返回（（十进制*100）+'%'）
}
const calcGoalProgress=（总计，目标）=>{
返回百分比到目标（总/目标）
}
导出常数SkiDayCount=（{总计、粉末、偏远地区、目标}）=>(
{total}
天
{粉末}
天
{穷乡僻壤}
天
{calcGoalProgress（总计，目标）}
)
SkiDayCount.defaultProps={
总数：'sdf'，
粉末：10，
偏远地区：15，
目标：75
}
SkiDayCount.propTypes={
总计：PropTypes.number.isRequired，
粉末：PropTypes.number，
backcountry:PropTypes.number
}

是否已检查您是否处于开发模式。出于性能原因，仅在开发模式下检查propTypes。

检查控制台是否存在错误控制台为空。没有错误，proptype应该正在生成错误。prop

total

在

SkiDayCount

中按要求标记，并且您还标记了defaultProps total:“sdf”，因此它不会在控制台中向您显示任何警告。请检查这个演示是否清晰，Jayavel-“sdf”是一个字符串，我将原型设置为数字-这不应该引发错误吗？我已将Jayavel链接分叉到，我可以看到所有验证错误-我处于开发模式。