React中的属性校验和默认属性

一，在react中props是组件对外暴露的接口，但通常组件并不会明显的申明他会暴露那些接口及类型，这不太利于组件的复用，但比较好的是React提供了PropTypes这个对象用于校验属性的类型，PropTypes包含组件属性的所有可能类型，以下我们通过一个示列来说明（对象的key是组件的属性名，value是对应属性类型）组件属性的校验.

       import propTypes from 'prop-types'；//导入之前要提前npm，yarn，或npm的淘宝镜像均可下载

       class PostItem extends React.Component{

         //........

      }

       PostItem.propsTypes={

        post:propTypes.object,

       onVote:propTypes.func

};

二，proptypes可以校验的组件类型的属性类型表

组件属性类型和propTypes属性的对应关系

类型	propTypes对应的属性
String	propTypes.string
Number	propTypes.number
Boolean	propTypes.bool
Function	propTypes.func
Object	propTypes.object
Array	propTypes.array
Symbol	propTypes.symbol
Element（React元素）	propTypes.element
Node（可被渲染的节点，数字，字符串，React元素或者由这些类型的数据组成的数组）	propTypes.node

三，当我们使用propTypes.object或propTypes.array校验属性类型时，我们只知道属性类型时一个数组或对象，而无从得知对象的具体结构和数组元素的类型是什么样子,这时候我们更好的做法是用propTypes.shape和propTypes.arrayOf.

   示列:

  style:propTypes.shape({

        color:propTypes.string,

        fontSize:propTypes.number

}),

sequence:propTypes.arrayOf(propTypes.number);

说明：

表示style属性是一个对象，对象有两个属性，一个是string类型color,另外一个是数字类型的number，sequence表示属性为一个数组并且每一个数组元素都是数字类型

四：必须属性和非必须属性

  如果传入组件的某一个属性是比需属性则可以在属性验证后面加上isRequired。

示列：

 PostItem.propTypes={

post:propTypes.shape({

  id:propTypes.number,

  title:propTypes.string,

  author:propTypes.string,

 data:propTypes.string

}).isRequired,

onVote:propTypes.func.isRequired

}

五：React还为组件指定默认属性（defaultProps），当组件未被赋值时，组件会使用defaultProps定义的属性

 示列：

 function Welcome（props）{

return <h1 className="foo">Hello ,{props.name}</h1>

}

Welcome.defaultProps={

 name:'Stranger'

}

以上为React属性验证小知识点，如有不当之处，希望被拍正