react props校验操作--PropTypes

说明：

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据
如果传入的数据格式不对，可能会导致组件内部报错
关键问题：组件的使用者不知道明确的错误原因

作用

1.允许创建组件的时候指定props的类型，格式
2.捕获使用组件时因为props导致的错误，给出明确的错误指示增加组件的健壮性

使用步骤

1.下载安装

npm i prop-types
or
yarn add prop-types

2.在需要的组件中导入prop-types包

import PropTypes from 'prop-types'

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

校验规则通过PropTypes对象来指定（注意propTypes 和 PropTypes 的写法）

App.propTypes = {colors: PropTypes.array //规定传入的值的类型为数组**约束规则**
1.常见类型：array  bool  func  number   object   string
2.React元素：element
3.必填项：isRequired     例如：PropTypes.func.isRequired
4.特定结构的对象  shape({})
}

4. 给props设置默认值

例如场景：分页组件—>每页显示的默认条数
作用：给props设置默认值在未传入props时生效

App.defaultProps={pageSize:10
}

react props校验操作--PropTypes相关推荐

React的Props校验与默认值
React的Props使用 React的props校验一.使用步骤: props校验需要先安装prop-types这个库 npm i -S prop-types 引用prop-types imp ...
React的Props检查：PropTypes
一.概述 props是React组件接收的外部参数,相当于是组件暴露给外部的接口.PropTypes的作用更多的是一种文档性质的限制,通过给每个props属性设置对应的PropTypes来提示开发者和 ...
前端框架--React props与React state
版权声明:本文为博主原创文章,未经博主允许不得转载. 二者区别 state 和props 主要的区别在于子组件通过props来传递数据,一旦外部传入数据后, props 不可改变. 而 state作为 ...
react 执行入口_如何使用React执行CRUD操作
react 执行入口 by Zafar Saleem 通过Zafar Saleem 如何使用React执行CRUD操作 (How to perform CRUD operations using Re ...
模块开发之React使用第三方库PropTypes属性限制(十二)
模块开发之React使用第三方库PropTypes属性限制(十二) 前言这是一个纯配置的第三方库模块,所以我们需要掌握知识不需要太详细.能知道并拿来即用即可. 下面以使用该模块的背景展开,然后介绍使 ...
[react] props.children.map和js的map有什么区别？为什么优先选择react的？
[react] props.children.map和js的map有什么区别?为什么优先选择react的? React.Children.map 能够处理未知数据类型,即使 React.childre ...
[react] React中怎么操作虚拟DOM的Class属性
[react] React中怎么操作虚拟DOM的Class属性 render() { this.debug('render ....'); this.components.push(<Atten ...
React 对组件props限制（ prop-types 依赖）
在 React 项目中对组件参数限制. 下载 prop-types 依赖包 yarn add prop-types 或 npm i prop-types在模块中引入并使用 import PropTyp ...
与钩React过度-实际操作
It all started with a tweet by Eric Elliott and everyone loses their mind. 一切始于埃里克·埃利奥特(Eric Elliott ...

react props校验操作--PropTypes

说明：

作用

使用步骤

1.下载安装

2.在需要的组件中导入prop-types包

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

4. 给props设置默认值

react props校验操作--PropTypes相关推荐

最新文章

热门文章

react props校验操作--PropTypes

说明：

作用

使用步骤

1.下载安装

2.在需要的组件中导入prop-types包

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

4. 给props设置 默认值

react props校验操作--PropTypes相关推荐

最新文章

热门文章

4. 给props设置默认值