react为组件初始化默认值，对值进行类型校验

在用vue的时候我们给组件传值是这样的，比如我们有一个item.vue的组件
在这个组件里面，我们在props里面接收传来的数据，在count里面的type和value中规定值的类型和默认值

<template>
  <div>{{count}}</div>
</template>

<script>
export default {
  props: {
  	count: {
		type: Number,
  		value: 0
	}
  },
  created(){
	
  }
}
</script>

但是在react这样子是不行的，要换一种方法，用default和propTypes来进行初始化默认值和类型校验
看下面这个Counter组件

使用PropTypes 要先用npm安装：npm install prop-types

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Counter extends Component {
    constructor(props){
        super(props)
        this.state = {

        }
    }

    //当外界没有传递props的时候，我们应该在初始化的时候给一个默认值
    // 初始化initCount
    static default = {
        initCount: 0
    }

    //创建静态的propTypes对象，把外界传递的属性做类型校验
    static propTypes = {
        //规定传来的initCount必须是number类型
        initCount: PropTypes.number
    }

    render() {
        return(
            <div>
                <input style={{marginTop: '30px'}} type="button" value="+1"/>
                <p>当前的数值是：{this.props.initCount}</p>
            </div>
        )
    }
}

export default Counter

现在我们规定了initCount必须是一个数字类型的值，现在传一个字符串会怎么样呢

就会提示下面的错误