propTypes 类型检查
JavaScript 是一门弱类型的语言，允许变量类型做隐式转换。为了减少这种错误，你还可以使用 Flow 或 TypeScript进行检查；即使你不使用这些扩展，React 也内置了一些类型检查的功能。要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性
注意：自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types库 https://www.npmjs.com/package/prop-types 代替。
- 安装 PropTypes
npm install --save prop-types
- 使用 PropTypes
已组件通信文章里的子组件为例子
import React, {Component} from 'react'
import PropTypes from 'prop-types' //导入prop-types
class TodoItem extends Component {
constructor(props) {
super(props)
this.del = this.del.bind(this)
}
render() {
const { content } = this.props
return (
<li>
{content}
<button onClick={this.del}>删除</button>
</li>
)
}
del() {
const { deleteItem, index } = this.props
deleteItem(index)
}
}
// 对 组件（TodoItem）类型 （propType） 进行强校验
TodoItem.propTypes = {
//里面的PropTypes 必须和你导入定义的名字一致
content: PropTypes.string, //必须是字符串
deleteItem: PropTypes.func, //必须是函数 function
index: PropTypes.number, //必须是number
//test: PropTypes.string.isRequired 假设有一个test参数需要接收类型为string； .isRequired 代表 必须传递， 如果不传递他是会报error警告的
/* 常用类型：
* PropTypes.array 数组：数组对象用来在单独的变量名中存储一系列的值
* PropTypes.bool 指代真或假、是或否。这个类型只有两个值，就是 true 和 false
* PropTypes.func 函数可用于所有内建的 JavaScript 对象
* PropTypes.number 数字：有整型字面量、浮点型字面量、NaN、Infinity
* PropTypes.object 对象也是变量。但是对象包含很多值。
* PropTypes.string 由UTF-16编码的字符集组成 'abc 1'
* PropTypes.symbol ES6中引入的第6种基本类型 值只能通过 Symbol() 函数生成，不能使用 new 操作符，因为没有构造器。且其生成的每一个值，都是独一无二的，因而能够解决冲突问题。 Symbol('foo')
* PropTypes.node 节点：字符串，DOM 元素或包含这些类型的数组
* PropTypes.element 元素： 一个 React 元素
* PropTypes.elementType 元素类型： 一个 React 元素类型（即，MyComponent）
* PropTypes.instanceOf(Message) 用 JS 的 instanceof 操作符声明 prop 为类的实例
* PropTypes.oneOf(['News', 'Photos']) 枚举类型：你可以让你的 prop 只能是特定的值，指定它为
* PropTypes.arrayOf(PropTypes.number, PropTypes.string) 或者：值为number或者string
* */
}
export default TodoItem
DefaultProps 可以通过配置特定的 defaultProps 属性来定义 props 的默认值
使用defaultProps 已组件通信文章里的字组件为例子
import React, {Component} from 'react'
import PropTypes from 'prop-types' //导入prop-types
class TodoItem extends Component {
constructor(props) {
super(props)
this.del = this.del.bind(this)
}
render() {
const { test } = this.props
const { content } = this.props
return (
<li>
{test} - {content}
<button onClick={this.del}>删除</button>
</li>
)
}
del() {
const { deleteItem, index } = this.props
deleteItem(index)
}
}
// 对 组件（TodoItem）类型 （propType） 进行强校验
TodoItem.propTypes = {
test: PropTypes.string.isRequired //必须传递
}
// 对 组件（TodoItem）类型 （propType） 添加默认值
TodoItem.defaultProps = {
/* 上方校验 test 必须传递
* 当它让在未填写的时候给它一个默认值就可以设置默认值
*/
test: 'hello world'
}
export default TodoItem
