第九单元(propTypes验证)

#课程目标

  1. 理解类型验证的必要性

  2. 灵活掌握类型验证的使用

#知识点

  1. 在给react组件传属性的的时候,我们可以定义属性的类型,此时我们需要下载prop-types这个库。

安装prop-types

npm install prop-types -S
1

引入和使用

import PropTypes from 'prop-types';

class Hello extends Component{
static propTypes = {
title: PropTypes.string.isRequired
}
}
// title属性的值必须是字符串且必传
 

基本的使用格式如下:

  1. 基本的类型验证如下

    • PropTypes.array 类型应为数组
    • PropTypes.bool 类型应为布尔
    • PropTypes.func 类型应为函数
    • PropTypes.number 类型应为数字
    • PropTypes.object 类型应为对象
    • PropTypes.string 类型应为字符串
    • PropTypes.element 验证属性为React元素
    • PropTypes.node 类型为React可以渲染的任何东西,数字,字符串,元素等等
    • PropTypes.any 任何类型都可以
  2. 还有一些辅助方法

    • instanceOf 使用形式如下: PropTypes.instanceOf(Array).isRequired 这个方法表示验证类型必须是某个类的实例,上述代码表示传入的参数必须是Array的实例;一般这个方法会接收一个类;

    • oneOf 使用形式如下: PropTypes.oneOf([‘news’,’photos’]) 这个方法用来规定传入的属性必须是给定值中的一个,上述代码表示传入的值只能是’news’或者’photos’,一般该方法接收一个数组,数组的元素则为供选择的值

    • oneOfType 使用形式如下

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

    这个方法表示传入的参数可以使多种类型中的一个,上述代码表示传入的参数可以是字符串,数字或者一个Array的实例;一般该方法接收一个数组,数组的元素是规定传入参数的类型的;

    • arrayOf 用法如下: PropTypes.arrayOf(PropTypes.string) 该方法表示传入的参数必须是某个类型的数组,上述代码表示传入的必须是一个字符串类型的数组,一般该方法接收一个验证类型;

    • objectOf 用法如下 PropTypes.objectOf(PropTypes.string) 该方法表示传入的参数必须是某个类型的对象,上述代码表示传入的必须是一个字符串类型的对象,一般该方法接收一个验证类型;

    • shape 用法如下:

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

    该方法规定传入的参数应该是一个特定的对象,上述代码表示传入的参数必须是对象,且应该有color属性其值是字符串,也应该有fontSize属性其值是数字;该方法接收一个对象,对象的属性值为验证类型;

    前边提到的所有的类型都可以在最后添加isRequired标签,表示该属性必须存在;

  3. 自定义验证类型

当然React给我们预留了自己验证的方法,使用起来会更加的灵活;我么可以为要验证的属性添加一个函数,该函数会在验证的时候自动执行,并且接受几个参数;

propTypes:{
msg:function(props,propName,componentName){
if(!/matchme/.test(props[propName])){
return new Error(`${componentName}内的${propName}类型不正确`)
}
}
}
 

通过上述代码我们可以得知:该自定义的验证函数可以接收三个参数分别是:组件的属性(this.props)、当前正在验证的属性名、组件的名称;在函数内部我们可以书写验证逻辑,如果验证不通过,就返回一个Error类型的错误;

#授课思路

#案例和作业

react第九单元(propTypes验证)的更多相关文章

  1. 【React系列】Props 验证

    Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效.当向 props 传入无效 ...

  2. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  3. vue第九单元(非父子通信 events 单向数据流)

    第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...

  4. React中的PropTypes详解

    propTypes用来规范props必须满足的类型,如果验证不通过将会有warn提示. React PropTypes的种类有: React.PropTypes.array // 队列 React.P ...

  5. React 学习(二) ---- props验证与默认属性

    在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...

  6. PropTypes验证器

    PropTypes用于对类型的验证,从而更加容易捕获bug.在React v15.5之前,它内置React.PropTypes函数帮助解决,之后放弃支持,采用prop-types库定义. import ...

  7. react.js 表单验证-登录框

    import React,{ Component } from 'react'; import style from 'cms.css'; ​ /** * 路由路径 登录成功后页面跳转到index * ...

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

    一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...

  9. React中使用 PropTypes 进行类型检查

    官方文档学习链接:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html import React, { Component ...

随机推荐

  1. ABBYY FineReader 15 安装教程

    ABBYY FineReader 是一款出名的OCR文字识别工具,它包含文档转换.数据捕获等功能,文字识别率较高.能够带来快速.简单.易用的文字识别体验,从而提高工作效率.下面就为大家讲解ABBYY ...

  2. 利用MathType在Word里输入几何符号的技巧

    通过学习几何学的知识,我们发现其中包含的几何符号有很多,比如有表示图形的符号,如三角形,平行四边形,圆,角,圆弧等:还有表示位置关系的符号,如平行,垂直等:还有表示矢量等其他符号,那这些符号怎么打出来 ...

  3. C++ cout格式化输出完全攻略

    写算法题的时候突然发现自己忘记基本的C++:cout格式化输出了,赶紧拉出以前的C++学习笔记重新看一看. 部分内容来自教程:C语言中文网(一个很棒的网站) 有时希望按照一定的格式进行输出,如按十六进 ...

  4. [java基础]复习 java三大特性,异常,接口,String

    继承 关键字extends 继承是为了不同的实现(龙生九子,各不相同) 单继承,一个类最多只能有一个父类 除了私有的外,子类可以访问父类的方法.属性. new过程中,父类先进行初始化,可通过super ...

  5. leetcode 493

    //利用归并排序来完成,归并排序可参考前面代码,归并排序可用来完成这类逆序对之类的问题,采用分治的思想,对于归并排序的代码不需要多改动,只需要在归并之前进行一次寻找操作,找出count的数量 clas ...

  6. Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  7. spring mvc 文件上传报“由于没有提供multi-part配置,无法处理parts”

    在使用springMVC进行文件上传时,报了HTTP 500的错. 才发现原来是在springmvc.xml配置文件中,multipart中的id写错了. 错误代码: <!-- 配置文件解析器- ...

  8. gsap基础一[from,to,fromTo]

    学了几天基础了,感觉总算有点入了一个门的感觉啦,gasp不难,想想一年前我看着官网跟天文一样,今年真的进步很大,在外网发现学习的新世界, 自己的获取知识和查看api源码的能力也增强了许多,现在国内的气 ...

  9. PyQt(Python+Qt)学习随笔:Qt Designer中Action创建的方法

    在Qt Designer中,可以两种方法创建Action对象,一种是菜单定义时,一种是单独定义. 一.定义菜单创建Action 在Qt Designer中创建菜单时,如果对应菜单是最终执行的菜单项,则 ...

  10. 巨经典论文!推荐系统经典模型Wide & Deep

    今天我们剖析的也是推荐领域的经典论文,叫做Wide & Deep Learning for Recommender Systems.它发表于2016年,作者是Google App Store的 ...