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

发布时间:2019-06-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了初识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比较常用的应该就是以上那些类型了,如果后期有新发现会不间断更新文章

脚本宝典总结

以上是脚本宝典为你收集整理的初识React(6):propTypes类型检测全部内容,希望文章能够帮你解决初识React(6):propTypes类型检测所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。