React—— props校验(非typescript校验类型)

非typescript环境下,当我们在封装组件的时候,接受props时传入的内容,需要做类型检测,那我们可以用props校验进行类型的检查。

props校验允许在创建组件的时候,就约定props的格式、类型等

实现步骤:

  • 导入 prop-types

  • 使用组件名.propTypes = {} 来给组件的props添加校验规则

  • 校验规则通过 PropTypes 对象来指定

  • 如果props想设置默认值,可以通过defaultProps去设置

    1. 常见类型:array、bool、func、number、object、string
    2. React元素类型:element
    3. 必填项:isRequired
    4. 特定结构的对象:shape({})
js 复制代码
import PropTypes from 'prop-types'
function App(props) {
    return (
    	<h1>{props.colors}</h1>
    	<h1>{props.num}</h1>
    	<h1>{props.name}</h1>
    )
}
// 这里约定了属性时什么类型,不然类型检测不通过,会清晰报错
App.propTypes = {
    colors: PropTypes.array,
    num:PropTypes.number,
    name:PropTypes.string,
}

// 设置默认值
App.defaultProps = {
	colors: ['蓝色'],
    nun:18,
    name:'hyy'
}

###React------ 类的-static 校验简写上面的校验

ES6新出的class可以帮组我们进行类型校验,我们可以定义一个类,给定其类型即默认值。

  • 实例成员: 通过实例 调用的属性或者方法叫做实例成员(属性或者方法)

  • 静态成员:通过类或者构造函数本身 才能访问的属性或者方法

    static可以把实例成员设置未静态成员

static的作用:简写校验、简写默认值

js 复制代码
import PropTypes from 'prop-types'
function App(props) {
    return (
    	<h1>{props.colors}</h1>
    	<h1>{props.num}</h1>
    	<h1>{props.name}</h1>
    )

// 这里约定了属性时什么类型,不然类型检测不通过,会清晰报错
static propTypes = {
    colors: PropTypes.array,
    num:PropTypes.number,
    name:PropTypes.string,
}

// 设置默认值
static defaultProps = {
	colors: ['蓝色'],
    nun:18,
    name:'hyy'
}
}
相关推荐
vvilkim24 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿29 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年29 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's8 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim8 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim8 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心8 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络8 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket