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

2024年2月10日 202次阅读 来源: hope93

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比较常用的应该就是以上那些类型了，如果后期有新发现会不间断更新文章。

    原文作者：hope93
    原文地址: https://segmentfault.com/a/1190000016182458
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞