react中props效验

最新推荐文章于 2024-03-20 11:14:16 发布

mmmawo

最新推荐文章于 2024-03-20 11:14:16 发布

阅读量821

点赞数

文章标签： react

本文链接：https://blog.csdn.net/mmmawo/article/details/121246671

版权

本文介绍了在React中进行props类型校验的重要性，以及如何使用`prop-types`库进行校验。通过示例代码展示了如何定义props的类型规则，包括基本数据类型、React元素类型和必填项。同时，讲解了设置props默认值的两种方法：`defaultProps`和结构赋值。最后，提到了使用静态属性简化props校验和默认值设置的方法，增强了组件的健壮性。

摘要由CSDN通过智能技术生成

类型校验的必要性

在react中需要效验接受props的数据类型,增强组件的强壮性(~~主要是eslint一直在报错~~),对于子组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，有了类型校验，我们的程序就更加健壮了。

使用步骤

1导入prop-types包,这个包在脚手架创建的时候就自带了,无须额外的安装.导入命令:import PropTyoes from 'prop-types'
使用:组件名.propTypes={属性名1:类型,是否为必须...}来给组件的props添加效验规则这里的propTypes是固定写法

代码示例

import PropTypes from 'prop-types'
class App extends React.component {
  render(){
    return (
    	<h1>Hi, {props.colors}</h1>
    )
  }
    
}
App.propTypes = {
    // 约定colors属性为array类型
    // 如果类型不对，则报出明确错误，便于分析错误原因
    colors: PropTypes.array
}

props的常见效验规则

数据类型:bool.array.func.number.object.string
React元素的类型:element
是否为必填项:isRequired
特定结构的对象:shape({})

props默认值

props的默认值有两个方法1.defaultprops 2.结构赋值的默认值

方法一:defaultprops

通过defaultprops可以给组件赋值,在未传入props 的时候生效

代码示例

App.defaultprops={
    属性名:默认值
}

方法二:结构赋值方法

通过结构赋值设置默认值

代码示例

const {a,b,c=10}={a:1,b:2}
//这个是时候没有c,所以c的默认值是10

props效验的简化--static(类的静态成员)

目标

了解静态属性的概念和特点，能用它来简化props校验和默认值

静态成员的定义和访问

class Person {
  constructor(name){
    this.name = name // 实例成员
  }
  // 方法1：在class内部 通过static来定义
  static n = 1 // 静态成员 有static修饰
}
// 方法2 在class外部 通过类型.属性名来定义
Person.m = function() { console.log()}

访问