第九单元(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. CorelDRAW中的3D线条表现方法

    CorelDRAW图形设计工具的最优势之一是其强大的交互式工具. 调和工具就是这样一种互动性很强的工具,从表面上看来可能不是那么突出,但功能是真的强啊!一旦发现它的潜力,它很快就会成为经验丰富的Cor ...

  2. 模拟赛38 B. T形覆盖 大模拟

    题目描述 如果玩过俄罗斯方块,应该见过如下图形: 我们称它为一个 \(T\) 形四格拼板 .其中心被标记为\(×\). 小苗画了一个 \(m\) 行 \(n\) 列的长方形网格.行从 \(0\) 至 ...

  3. QQ账号测试用例

  4. influxdb的基本使用

    influxDB名词 database:数据库: measurement:数据库中的表: points:表里面的一行数据. influxDB中独有的一些概念 Point由时间戳(time).数据(fi ...

  5. 【???】今天上午的考试题——区间dp和字符串/线性筛的综合应用

    T3还没有打出来,就先放两道. ---------------------------------------------------------- T1:密码破译 温温手下的情报部门截获了一封加密信 ...

  6. 6. Git工作流

    6.1 git工作流理解 在项目开发过程中使用 Git 的方式 6.2 git工作流分类 集中式工作流 像 SVN 一样,集中式工作流以中央仓库作为项目所有修改的单点实体.所有修改都提交到 Maste ...

  7. Java集合【9】-- Vector源码解析

    目录 1.Vector介绍 2. 成员变量 3. 构造函数 4. 常用方法 4.1 增加 4.2 删除 4.3 修改 4.4 查询 4.5 其他常用函数 4.6 Lambda表达式相关的方法 4.7 ...

  8. SpringBoot中的Tomcat是如何启动的?

    <dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>s ...

  9. 【2020.12.02提高组模拟】A组反思

    55,rk47 T1 赛时先想了\(trie\),想到不一定是前缀,然后就放弃转为打暴力 得分:\(RE22\) 正解是只用判断\(i\)与\(i+1\)的关系,那么只有两种情况,判断一下然后\(dp ...

  10. Linu之用户管理【useradd】【userdel】【usermod】【passwd】【权限】

    linux下创建用户 1.用户的创建 • 简介 linux是一个多用户多任务的分时操作系统,每个用户都是在root下的一个子用户,拥有不同的权限.用户登入成功后可进入系统和自己的主目录. •实现账号的 ...