从零开始学习React——(十三)：React中PropTypes校验传递值

日常开发中，父组件向子组件传值时，使用了属性的方式，也就是props。这种方式传值在大型项目中，如果不对其进行校验，后期会变的异常混乱，业务逻辑也没法保证。

1. PropTypes的简单使用

在Child.js组件里传递了4个值，有字符串，有数字，有方法，这些都是可以使用PropTypes限制的。使用之前必须引入一下PropTypes。

import PropTypes from 'prop-types'

引入后，就可以在组件的下方进行使用了，需要注意的是在子组件ChildItem.js的最下面，写入下面代码：

	// 校验
	ChildItem.propTypes = {
	  content: PropTypes.string,
	  delItem: PropTypes.func,
	  index: PropTypes.number
	}

这个时候在浏览器中查看是看不出来效果的，但是如果修改一个错误的校验。比如把index改为必须是字符串。

	index: PropTypes.string

这时候浏览器就会报错，报错信息如下：

	Warning: Failed prop type: Invalid prop `index` of type `number` supplied to `ChildItem`, expected `string`.
    at ChildItem (http://localhost:3000/static/js/main.chunk.js:264:5)
    at Child (http://localhost:3000/static/js/main.chunk.js:56:5)

意思是要求传递字符串，但是传递了数字过去，所以给了报错

1. 必传值的校验

现在加入一个cname的属性，并放入JSX中，就算不传递这个值也不会报错。代码如下：

	render() {
		return (
			<div onclick = {this.handleClick}>
				{this.props.cname} - {this.props.content}
			</div>
		)
	}

这个时候代码是不会报错的，因为传不传无所谓，此时从父组件Child.js中传一个属性过来。

	<ChildItem
        key = {item + index} 
          content = {item}
          index = {index}
          cname = '固定cname'
          delItem = {this.delItem.bind(this)}>
      </ChildItem>

这时候页面显示正常了。怎么样避免必须传递cname这个属性值？如果不传递就报错，这就需要使用sRequired关键字，它表示必须进行传递，如果不传递就报错。

	cname: PropTypes.string.isRuquired	

2. 使用默认值

开发的时候有时候不需要传值，或者忘记传值的时候我们可以直接定义一个默认值，使用defaultProps关键字就可以了。它的作用就是设置默认值

	ChildItem.propTypes = {
		cname: '我是默认值'
	}