react.js的PropTypes与defaultProps的使用

【1】PropTypes

~1：什么是PropTypes

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
注释：React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。

~2：React.PropTypes 提供的验证器 (validator)

React.PropTypes.array
React.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string
React.PropTypes.node // 所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组。
React.PropTypes.element // React 元素
React.PropTypes.instanceOf(Message) // 用 JS 的 instanceof 操作符声明 prop 为类的实例
React.PropTypes.oneOf(['News', 'Photos']) // 用 enum枚举 来限制 prop 只接受指定的值。
React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(Message)]) // 指定的多个对象类型中的一个
React.PropTypes.arrayOf(React.PropTypes.number) // 指定类型组成的数组（如只接受数字组成的数组）
React.PropTypes.objectOf(React.PropTypes.number) // 指定类型的属性构成的对象（如只接受数字组成的对象）
React.PropTypes.shape({color: React.PropTypes.string,fontSize: React.PropTypes.number}) // 特定形状参数的对象（字符串颜色，数字字体）

以后任意类型加上 'isRequired' 来使 prop 不可空。
React.PropTypes.func.isRequired
React.PropTypes.any.isRequired //不可空的任意类型

注释：五种基本类型中的不确定和空并不在此列，所以对于不确定的和无效的值，它无法捕捉错误。

~3: PropTypes的使用与作用

import React from 'react'
import PropTypes from 'prop-types';
class Son extends React.Component{
   render(){
        return (<div style ={{padding:30}}>
                      {this.props.number}
                      <br/>
                      {this.props.array}
                      <br/>
                      {this.props.boolean.toString()}
                    </div>)
                  }
}
Son.propTypes = {
        number:PropTypes.number,//意味着父组件向子组件传值的时候number属性的类型必须为number。
        array:PropTypes.array,
        boolean:PropTypes.bool
}
class Father extends React.Component{
    render(){
         return (<Son
                       number = {'1'}
                       array = {'[1,2,3]'}
                       boolean = {'true'}
                        />)
                  }
}

~3.1 oneOfType
有时候我们对于传入的属性值的要求的类型不一定是单一的，可以是多种的，在实现这些属性的校验是就可以使用oneOfType。

Son.propTypes = {
number:PropTypes.oneOfType(
[PropTypes.string,PropTypes.number]//意味这父组件传入的number的类型可以是string或则number型
)
}

~3.2 arrayOf，objectOf
arrayOf接收一个参数，这个参数是规定的数组元素的数据类型.

Son.propTypes = {
     array:PropTypes.arrayOf(PropTypes.number)//传入的array数组中的元素类型为number
}

objectOf接收的参数则是属性的数据类型

Son.propTypes = {
     obj:PropTypes.objectOf(PropTypes.number)//obj对象里的属性的数据类型要为number
}

【2】defaultProps

~1 什么是defaultProps
通过组件类的 defaultProps 属性为 props 设置默认值
~2 defaultProps的使用与作用

Son.defaultProps = {
        number:"123",//意味着父组件向子组件传值的时候number属性的默认值为123，当父组件没有向子组件传递number这个属性时，number会显示其默认属性值123
}