react学习之旅八：PropTypes传值校验

传值校验非常重要，否则项目一旦复杂起来很容易出现业务逻辑错误。

传值校验的代码都写在类外。

一、传值校验

在之前的小姐姐服务菜单中没有进行父子组件的传值校验，修改XiaojiejieItem.js如下：

XiaojiejieItem.propTypes = {
    content:PropTypes.string,//必须为string类型
    index:PropTypes.number,//必须为数字
    deleteItem:PropTypes.func//必须为方法
}

二、默认值

假设XiaojiejieItem还必须从Xiaojiejie组件中接收一个name的参数，但是Xiaojiejie组件并没有传递这个参数过来，XiaojiejieItem可以给name赋默认值：

name不为空并且为字符串类型

XiaojiejieItem.propTypes = {
    name:PropTypes.string.isRequired,//必须传递且为string类型
    content:PropTypes.string,//必须为string类型
    index:PropTypes.number,//必须为数字
    deleteItem:PropTypes.func//必须为方法
}

为name赋默认值

XiaojiejieItem.defaultProps={
    name:"小可爱" //给name默认值
}

运行结果