react学习—属性默认值和类型验证

最新推荐文章于 2024-05-20 12:07:46 发布
最新推荐文章于 2024-05-20 12:07:46 发布
阅读量843 收藏
点赞数
分类专栏： react学习 文章标签： react 属性默认值 属性类型验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun__xing/article/details/116058440
版权

属性默认值和类型验证

一、属性默认值

通过一个静态属性defaultProps告知react属性默认值

1、函数组件属性默认值

//FuncDefault.js
import React from 'react'

export default function FuncDefault(props) {
  return (
    <div>
      a: { props.a },b: { props.b },c: { props.c }
    </div>
  )
}
//属性默认值
FuncDefault.defaultProps = {
  a: 1,
  b: 2,
  c: 3
}

import React, { Component } from 'react'
import FuncDefault from './FuncDefault'

export default class Input extends Component {
  render() {
    return (
      <div>
        {/* 注意我们没有传入属性值哦 */}
        <FuncDefault />
      </div>
    )
  }
}

然后组件就会默认调用我们设置的默认属性值。
在这里插入图片描述
如果我们又传入属性值，有设置默认属性值呢？

import React from 'react'

export default function FuncDefault(props) {
  console.log(props);// 给函数组件之前，props已经与defaultProps完成了混合
  return (
    <div>
      a: { props.a },b: { props.b },c: { props.c }
    </div>
  )
}
//属性默认值
FuncDefault.defaultProps = {
  a: 1,
  b: 2,
  c: 3
}

在这里插入图片描述

2、类组件默认属性值

//ClassDefault.js
import React, { Component } from 'react'

export default class ClassDefault extends Component {
  // he函数组件一样，在调用组件时props已经混合完成
  constructor(props) {
    console.log(props);
    super(props);
  }
  render() {
    return (
      <div>
        a: { this.props.a},b: { this.props.b},c: { this.props.c}
      </div>
    )
  }
}
ClassDefault.defaultProps = {
  a: 1,
  b: 2,
  c: 3
}

import React, { Component } from 'react'
import ClassDefault from './ClassDefault'

export default class Input extends Component {
  render() {
    return (
      <div>
        {/* 注意我们没有传入属性值哦 */}
        <ClassDefault a={4} b={5} />
      </div>
    )
  }
}

在这里插入图片描述
此外，类组件的默认属性值，也可以直接使用静态成员的方式书写。

export default class ClassDefault extends Component {
  // he函数组件一样，在调用组件时props已经混合完成
  constructor(props) {
    console.log(props);
    super(props);
  }
  static defaultProps = {
    a: 1,
    b: 2,
    c: 3
  }
  render() {
    return (
      <div>
        a: { this.props.a},b: { this.props.b},c: { this.props.c}
      </div>
    )
  }
}

二、属性类型验证

使用库：prop-types

对组件使用静态属性propTypes告知react如何检查属性

1、常见值类型

// ValidationComp.js
import React, { Component } from 'react'
import PropTypes from 'prop-types';

export default class ValidationComp extends Component {
  static propTypes = {
    a: PropTypes.number,
    b: PropTypes.bool
  }
  render() {
    return (
      <div>
        a: { this.props.a },b: { this.props.b }
      </div>
    )
  }
}

import React, { Component } from 'react'
import ValidationComp from './ValidationComp'

export default class Input extends Component {
  render() {
    return (
      <div>
        <ValidationComp a={4} b={'true'} />
      </div>
    )
  }
}

由于我们b属性开启了类型验证为布尔，此时我们传入的是字符，虽然页面上成功显示，单控制台会进行报错。
在这里插入图片描述
也可以使用jsx语法，直接传入b即可，默认为true。

import React, { Component } from 'react'
import ValidationComp from './ValidationComp'

export default class Input extends Component {
  render() {
    return (
      <div>
        {/* 注意我们没有传入属性值哦 */}
        <ValidationComp a={4} b />
      </div>
    )
  }
}

也可以不传入b值，使用属性默认值。

export default class ValidationComp extends Component {
  static defaultProps = {
    b: false
  }
  static propTypes = {
    a: PropTypes.number,
    b: PropTypes.bool
  }
  render() {
    return (
      <div>
        a: { this.props.a },b: { this.props.b }
      </div>
    )
  }
}

通过这里我们也可以发现，仍然是在调用组件时，属性值和默认属性值已经完成混合，所以此时属性类型验证才能知道b的值类型为布尔
在这里插入图片描述

2、是否必传isRequired

在之前的学习中我们知道，哪怕我么适应了b属性值，但b属性值不传不设置默认值，react不会有报错提示。

import React, { Component } from 'react'
import PropTypes from 'prop-types';

export default class ValidationComp extends Component {
  // static defaultProps = {
  //   b: false
  // }
  // static propTypes = {
  //   a: PropTypes.number,
  //   b: PropTypes.bool
  // }
  render() {
    return (
      <div>
        a: { this.props.a },b: { this.props.b }
      </div>
    )
  }
}

一旦我们对属性类型验证开启必传验证后。

export default class ValidationComp extends Component {
  // static defaultProps = {
  //   b: false
  // }
  static propTypes = {
    a: PropTypes.number,
    b: PropTypes.bool.isRequired
  }
  render() {
    return (
      <div>
        a: { this.props.a },b: { this.props.b }
      </div>
    )
  }
}

此时系统会进行提示报错，b必须传入。
在这里插入图片描述

3、其它类型验证

由于react的验证方法很多，但是常用的往往就那几个，剩下的就不再一一详细举例了。
博主直接将其他的验证方法直接附上。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export class A {}

export default class ValidationComp extends Component {
  static defaultProps = {
    b: false
  }
  static propTypes = {
    a: PropTypes.number.isRequired,  //a属性必须是一个数字类型,并且必填
    b: PropTypes.bool.isRequired, //b必须是一个bool属性,并且必填
    onClick: PropTypes.func, //onClick必须是一个函数
    c: PropTypes.any, //1. 可以设置必填   2. 阵型保持整齐（所有属性都在该对象中）
    d: PropTypes.node.isRequired, //d必填，而且必须是一个可以渲染的内容，字符串、数字、React元素   d={<Comp />}
    e: PropTypes.element, //e必须是一个React元素  e={<Comp />}
    F: PropTypes.elementType, //F必须是一个组件类型  F={Comp}
    g: PropTypes.instanceOf(A), //g必须是A的实例，普通对象也不行  g={new A}
    sex: PropTypes.oneOf(["男", "女"]), //属性必须是数组当中的一个，非'男'即'女'  sex={'男'}
    h: PropTypes.arrayOf(PropTypes.number), //数组的每一项必须满足类型要求（可以使空数组）  n={[1,2,3]}
    i: PropTypes.objectOf(PropTypes.number), //每一个属性必须满足类型要求  i={{a: 1}}
    j: PropTypes.shape({ //属性必须满足该对象的要求，相当于组合使用
      name: PropTypes.string.isRequired, //name必须是一个字符串，必填
      age: PropTypes.number, //age必须是一个数字
      address: PropTypes.shape({// 如果继续嵌套函数，别忘了用shape
        province: PropTypes.string,
        city: PropTypes.string
      })
    }),
    k: PropTypes.arrayOf(PropTypes.shape({// 如果想验证数组每一个元素，可以灵活嵌套使用
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired
    })),
    l: PropTypes.exact({...}),// 对象必须精确匹配传递的数据，不能设置无效验证且不传属性
    m: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),// 数组元素的类型必须为其中一个，和oneOf类似
  }
  render() {
    return (
      <div>
        a: { this.props.a },b: { this.props.b }
      </div>
    )
  }
}

4、自定义验证

如果以上验证方法仍不能对你的属性进行验证，也可以自定义验证。
自定义属性检查，如果有错误，返回错误对象即可

// ValidationComp.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class ValidationComp extends Component {
  static defaultProps = {
    b: false
  }
  static propTypes = {
    a: PropTypes.number.isRequired,  //a属性必须是一个数字类型,并且必填
    b: PropTypes.bool, //b必须是一个bool属性,并且必填
    fn: function (props, propName, componentName) {
      console.log(props, propName, componentName);
      const val = props[propName];
      if(typeof val === 'string'){
        return new Error(`invalid prop ${propName} in ${componentName}，${propName} is String`);
      }
    }
  }
  render() {
    return (
      <div>
        a: { this.props.a },b: { this.props.b },fn: { this.props.fn }
      </div>
    )
  }
}

import React, { Component } from 'react'
import ValidationComp from './ValidationComp'

export default class Input extends Component {
  render() {
    return (
      <div>
        <ValidationComp a={4} b={true} fn={'自定义验证'} />
      </div>
    )
  }
}

在这里插入图片描述

飞羽逐星
关注
专栏目录
React学习六（Ant Design of React）
qq_44872688的博客
03-17 2216
文章目录一、特性二、使用过程1、安装2、antd引用三、antd的组件库1、Button按钮       antd 是基于Ant Design设计体系的 React UI 组件库，主要用于研发企业级中后台产品，来自于“蚂蚁金服”。 一、特性 ①提炼自企业级中后台产品的交互语言和视觉风格。 ②开箱即用的高质量 React 组件。 ③使用 TypeScript 开发，提供完整的类型定义文件。 ④全链路开发和设计工具体系。 ⑤数十个国际化语言支持。 ⑥
react学习记录-PropTypes 和组件参数验证
华工Web练习生
07-01 395
文章目录PropTypes 和组件参数验证PropTypes PropTypes 和组件参数验证 JavaScript 语言的弱类型，让我们写代码很爽，但是也很容易出 bug。 变量没有固定类型可以随意赋值，在我们构建大型应用程序的时候并不是什么好的事情。你写下了 let a = {} ，如果这是个共享的状态并且在某个地方把 a = 3，那么 a.xxx 就会让程序崩溃了。而这种非常隐晦但是低级的错误在强类型的语言例如 C/C++、Java 中是不可能发生的，这些代码连编译都不可能通过，也别妄图运行。 大型
ES6中参数的默认值语法介绍
11-29
前言 在ES6如果函数参数没有值或未定义的，默认函数参数允许将初始值初始化为默认值。下面来看看详细的介绍吧。 语法 function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { statements } 描述 在JavaScript中，函数默认参数定义。然而，在某些情况下，设置不同的默认值可能是有用的。这是默认参数可以帮助的地方。 在过去，设置默认值的一般策略是在函数体中测试参数值，如果它们是未定义的就分配一个值。如果在下面的例子中，在调用过程中b没有提供值，它的值将是undefined
React 参数默认值为 true
风起
12-05 587
react 官网，prop的默认值是true https://zh-hans.reactjs.org/docs/jsx-in-depth.html#props-default-to-true
第09节、React组件：props属性验证--PropTypes
DreamFive
03-07 571
组件的属性可以接受任意值，字符串、对象、数组、函数等等。有时候我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。比如希望name属性不能缺少、onClick属性必须是函数类型等，这对确保组件被正确使用非常有意义。为此React引入了propTypes机制。React.PropTypes提供各种验证器（validator）来验证传入数据的有效性。当向props传入无效数据时，React会...
React 函数组件与类组件属性默认值
卡尔特斯
04-05 1607
【代码】React 函数组件与类组件属性默认值。
react组件进阶 属性默认值
twinkle的博客
02-24 2179
默认值 我们在编写组件的时候，其实好多时候，我们都想组件的参数是可选参数，如果没有这个参数，我们就默认给上一个参数，在vue 中我们可以在模板中的props中定义属性名，然后default就有默认值了。但是在react 中我们如何来实现这个呢？ react 组件类型有两种，然后给默认值也是有两种方法的 方法一：利用js的天生优势——混合 类组件 使用案列如下： 上面我的使用方式是在render里面的，这个也可以是constructor里面来进行属性的赋值，具体的使用方式，根据实际情况而定，只要满足在
文本框设置默认值和验证提交
11-11
为提供更好的用户体验和数据完整性，我们需要对文本框进行默认值的设置以及提交时的数据验证。本文将详细讲解这两个关键点。 一、文本框设置默认值 文本框的默认值可以通过HTML属性`value`来设定。例如，如果我们...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
React中传值props校验
weixin_57519185的博客
11-21 649
一，为什么要做校验 类型校验的必要性： 对于子组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，有了类型校验，我们的程序就更加健壮了。 如果不校验会有什么问题 ? 简单来说就是报错！！ 在Vue中我们也用到了校验： 二，props校验-基本使用， 在react中我们有两种方法解决此类报错： 1，第一种快速修复： 第二种方案： 步骤： 导入 prop-types 包 。这个包在脚手架创建项目时就自带了，无须额外安装 import...
react-属性默认值与类型验证
yuey0809的博客
08-01 601
ps安装React会自动安装这个库,不需要额外安装,直接引用就行。react提供了属性默认值的设置方法。
React props属性验证
ma33xiao的博客
03-07 445
一、属性验证 1 安装 npm i prop-types 2 使用 import React, { Component } from 'react' import PropTypes from 'prop-types' export default class Fifth extends Component { //static 定义类属性，可以在类外Fifth.proTypes直接使用 static propTypes = { title: PropTypes.string,//规定t
react组件进阶 属性类型检查
twinkle的博客
02-24 762
在vue 中，给组件传值是可以默认属性值的类型或者自定义类型的。这样方便组件使用者不容易犯错，规定组件的使用方式，那么在react 组件中，我们怎么来对属性进行类型检查呢？ 通过上面官网的一段话，我们可以知道组件类型检查有两种方式： 一个是使用静态类型检查系统，如 flow， typescripts 等 另一种是在运行阶段使用 PropTypes 静态类型检查 我们从名字上就可以知道，静态类型是发生在代码的编写阶段，不发生在代码的运行阶段。所以我们在使用的过程中，就可以及时的提示我们代码是否.
react中属性的验证
qg2276879379的博客
08-11 613
前言： 为了验证传递进来的数据是否符合我们期望的类型或者要求，React提供了PropTypes这个对象用于校验属性的类型 准备工作： 首先我们要先安装一个propTypes库，脚手架命令 npm i prop-types --save 接着在使用前得先引入prop-type 定义好一个对象，添加属性验证 简单案列： import React, { Component } from 'react' //1. 引入验证库 import PropTypes from 'prop-types'; /*
react中怎么为props设置默认值
最新发布
笔记、经验、日常分享
05-20 1142
在react中可以通过props来实现父子组件之间的数据传递。有些时候，需要给props一个默认值，当在使用组件的时候如果没有给数据，可以显示默认数据，让用户体验更好。哪么在react中，在class组件或函数式组件中应该如何为props指定默认值呢？
react中props的属性值类型的设置与默认值的设置
shangsiqi1的博客
12-04 1530
当父组件给子组件传值时通常以键值对的形式在引入子件的标签中为子组件传值, 而在子组件中使用该值时要使用this.props.xxx获取传来的值,但是有时父组件不传值的时候,我们还是希望会有一个默认值 于是就要在子组件的类中设置一个静态的属性,对象中为子组件设置默认值 static defaultProps={ xxx:yyy } 当子组件接收父组件传来的值时,想确保数据的类型时就要用到prop...
React工作19:react设置默认值
qq_41632427的博客
07-15 527
react
react为组件初始化默认值，对值进行类型校验
weixin_43090018的博客
01-23 1146
在用vue的时候我们给组件传值是这样的，比如我们有一个item.vue的组件 在这个组件里面，我们在props里面接收传来的数据，在count里面的type和value中规定值的类型和默认值 <template> <div>{{count}}</div> </template> <script> export default { props: { count: { type: Number, value: 0 }
React(三)——React组件之属性默认值
黎小小的博客
03-30 6487
目录 1.默认属性值 1.1defaultProps 静态属性 1.1.1基于 static 的写法 2.非受控组件默认值 2.1defaultValue 属性 2.1defaultChecked 属性 1.默认属性值 1.1defaultProps 静态属性 defaultProps 可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 nu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值