初识React(6)：propTypes范例检测

2023年6月17日 276次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞