专栏首页kyle的专栏react中使用prop-types检测props数据类型

react中使用prop-types检测props数据类型

一、为什么使用prop-types

在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。

二、学习文档

https://www.npmjs.com/package/prop-types npm官网 https://reactjs.org/docs/typechecking-with-proptypes.html react官方

三、安装与引入

//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';

四、它可以检测的类型

optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol,

五、class定义中使用方法

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

六、ES7中使用方法示例

class Greeting extends React.Component {
  //如果没有传递该属性时的默认值
  static defaultProps = {
    name: 'stranger'
  }
  //如果传递该属性,该属性值必须为字符串
  static propTypes={
    name:PropTypes.string
  }
  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

七、使用isRequired设置属性为必须传递的值

 static propTypes={
    name:PropTypes.string.isRequired
  }

八、arrOf和objectOf多重嵌套类型检测

  // An array of a certain type
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
 
  // An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  //示例
  static propTypes = {
        todoList:PropTypes.arrayOf(PropTypes.shape({
            id:PropTypes.string.isRequired,
            text:PropTypes.string
        }))
    }

九、shape检测不同对象的不同属性的不同数据类型

  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
  //示例
  static propTypes = {
     object:PropTypes.shape({
         name:PropTypes.string,
         age:PropTypes.number
      })
 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • macos-右键新建文件

    mac上右击鼠标不能新建文件,使用起来非常的不方便。在我们新建文件时,需要打开终端,然后进入到相应的路径,在使用命令touch 文件名,相对来说不是很方便。

    _kyle
  • 用于列表下拉加载loading动画

    _kyle
  • CentOS 7.0关于Ping的禁止与启用

    _kyle
  • [OHIF-Viewers]医疗数字阅片-医学影像-使用 PropTypes 进行类型检查

    随着你的应用程序不断增长,你可以通过类型检查捕获大量错误。对于某些应用程序来说,你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来...

    landv
  • React Native 系列(六) -- PropTypes

    Scott_Mr
  • BGP电路详解(上)

    1.把匹配器件相互靠近放置  (共OD/Poly/OD space/Poly space一致)

    用户3324485
  • 安装pip

    1. 下载pip 地址:https://pypi.python.org/pypi/pip#downloads

    hankleo
  • (十七) 初遇python甚是喜爱之pip包管理工具使用

    各位读者大大们大家好,今天学习python的pip包管理工具,并记录学习过程欢迎大家一起交流分享。

    亚乐记
  • MNDR:哺乳动物中与疾病相关的ncRNA数据库

    随着科学研究的不断进步,科学家发现不编码蛋白的ncRNA与很多疾病的发生发展密切相关。MNDR通过收集文献和整理相关的公共数据库,整合了lncRNA,miRNA...

    生信修炼手册
  • python3.X 使用pip 离线安装whl包

    机器上python2,3混用的问题,参考: http://blog.csdn.net/wangyaninglm/article/details/533126...

    流川疯

扫码关注云+社区

领取腾讯云代金券