初识React(6)：propTypes类型检测

propTypes是react中用来对参数进行类型检测的，当然要使用这个插件，得先安装这个插件，如下：

npm install prop-types --save 

但是如果你是直接用dva创建的项目，无需安装，直接引入即可，如下：

import React from 'react';
import PropTypes from 'prop-types';

class PropType extends React.Component {
   render() {
     return (
       <div>
        <div>123</div>
        <div>{this.props.content}</div>
       </div>
     )
   }
}

PropType.propTypes = {
  content:PropTypes.string.isRequired
}
export default PropType;

上面那个例子中可以看出，要引入组件PropType，必须得传入参数类型为字符串的content参数，否则会报错

import React from 'react';
import { connect } from 'dva';
import PropType from './propTypes/propTypes.js'

function IndexPage() {
  return (
    <div>
      <PropType content={"123"}/>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

PropTypes常用的数据类型检测如下：

1. 字符串类型PropTypes.string
2. 布尔类型PropTypes.bool
3. 函数类型PropTypes.func
4. 数组类型PropTypes.array
5. 数字类型PropTypes.number
6. 对象类型PropTypes.object
7. 元素PropTypes.element
8. 传入任何东西都可以PropTypes.node
9. 选择特定值PropTypes.oneOf(['是', '否', "是否"])
10. 选择诸多类型中的一种（任意类型）PropTypes.oneOfType：

PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),

11.具有某种类型的数组PropTypes.arrayOf(PropTypes.number)：

PropTypes.arrayOf(PropTypes.number)

12.具有某种类型属性值的对象PropTypes.objectOf(React.PropTypes.number)

PropTypes.objectOf(React.PropTypes.number)

13.样式类型PropTypes.shape

PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  })

14.任何数据类型PropTypes.any.isRequired

注意： isRequired表示必要的参数，如果设置了isRequired没有参数传过来，则会报错

PropTypes比较常用的应该就是以上那些类型了，如果后期有新发现会不间断更新文章。