React中静态类型校验 - PropTypes
1.基本说明
PropTypes定义为组件类自身的属性,用以定义prop的类型。在开发模式下,当提供一个不合法的值作为prop时,控制台会出现警告;
在产品模式下,为了性能考虑应忽略propTypes
Prop types 是一个在运行时使用的新特性. 我们能够通过下面的方式在我们的团队里边使用.
2.版本更新
在15.5版本之后, 代替使用 PropTypes 直接从 React 对象这种导入方式, 安装一个新的包 prop-types 并且使用如下的方式进行导入:
// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';
class Component extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}
Component.propTypes = {
text: PropTypes.string.isRequired,
};
如下代码,为之前的书写方式
// Before (15.4 and below)
import React from 'react';
class Component extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}
Component.propTypes = {
text: React.PropTypes.string.isRequired,
}
由于版本不一致,一般会导致如下错误:
Unhandled JS Exception: Cannot read property 'string' of undefined
只要按照版本对应起来使用就可以了
3.具体使用
静态属性,只能通过类名.属性名指定
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
} Greeting.propTypes = { // 静态属性,只能通过类名.属性名指定
name: PropTypes.string
};
React.PropTypes输出一系列的验证器,用以确保你收到的数据是合法的。
下面是一个例子记录了不同的验证器;
MyComponent.propTypes = {
// 可以声明prop是特定的JS基本类型
// 默认情况下这些prop都是可选的
optionalArray:PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol, // 任何可以被渲染的事物:numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node, // A React element.
optionalElement: PropTypes.element, // 声明一个prop是某个类的实例,用到了JS的instanceof运算符
optionalMessage: PropTypes.instanceOf(Message), // 用enum来限制prop只接受特定的值
optionalEnum: PropTypes.oneOf(['News', 'Photos']), // 指定的多个对象类型中的一个
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]), // 指定类型组成的数组
optionalArrayOf: PropTypes.arrayOf(PropTypes.number), // 指定类型的属性构成的对象
optionalObjectOf: PropTypes.objectOf(PropTypes.number), // 一个指定形式的对象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}), // 你可以用以上任何验证器链接‘isRequired’,来确保prop不为空
requiredFunc: PropTypes.func.isRequired, // 不可空的任意类型
requiredAny: PropTypes.any.isRequired, // 自定义验证器,如果验证失败,必须返回一个Error对象
// 不要直接使用console.warn或者throw,这些在oneOfType中都没用
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
}, // 你也可以为arrayOf和objectOf提供一个验证器
// 如果验证失败,它也应该返回一个Error对象
// 在array或者object中,验证器对于每个key都会被调用The first two
// 验证器的前两个arguments是array或者object自身以及当前的key值
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
Requiring Single Child
你可以使用React.PropTypes.element指定仅可以将单一子元素作为子节点传递给组件。
class MyComponent extends React.Component {
render() {
// This must be exactly one element or it will warn.
const children = this.props.children;
return (
<div>
{children}
</div>
);
}
} MyComponent.propTypes = {
children: PropTypes.element.isRequired
};
默认Prop值
通过赋值特殊的defaultProps属性,你可以为props定义默认值:
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
} // Specifies the default values for props:
Greeting.defaultProps = {
name: 'Stranger'
}; // Renders "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
如果父组件没有为this.props.name传值,defaultProps会给其一个默认值。propTypes的类型检测是在defaultProps解析之后发生的,因此也会对默认属性defaultProps进行类型检测。
4.无状态组件的检查和默认设置
如下面所示,对无状态组件进行设置
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { View, Text, TextInput } from 'react-native'; const TextSegment = (props) => {
const {
behindStyle,
delimiter,
delimiterStyle,
frontStyle,
value,
style,
} = props;
let frontValue = '';
let behindValue = '';
const splits = value && delimiter && value.split(delimiter); if (splits && splits.length) {
frontValue = splits[0];
behindValue = splits[1];
} if (!delimiter) {
return (
<View style={[{ flexDirection: 'row' }, style]}>
<Text style={frontStyle}>{value}</Text>
</View>
);
} return (
<View style={[{ flexDirection: 'row' }, style]}>
<Text style={frontStyle}>{frontValue}</Text>
<Text style={delimiterStyle}>{delimiter}</Text>
<Text style={behindStyle}>{behindValue}</Text>
</View>
);
}; TextSegment.propTypes = {
frontStyle: TextInput.propTypes.style,
delimiterStyle: TextInput.propTypes.style,
behindStyle: TextInput.propTypes.style,
style: View.propTypes.style,
delimiter: PropTypes.string,
value: PropTypes.string,
}; TextSegment.defaultProps = {
style: {
alignItems: 'flex-end',
},
value: '',
}; export default TextSegment;
在上面代码中,通过方法名进行引用propTypes和defaultProps,其他用法和组件中使用一致。
React中静态类型校验 - PropTypes的更多相关文章
- Java中静态类型检查是如何进行的
以下内容来自维基百科,关于静态类型检查和动态类型检查的解释: 静态类型检查:基于程序的源代码来验证类型安全的过程: 动态类型检查:在程序运行期间验证类型安全的过程: Java使用静态类型检查在编译期间 ...
- React组件属性部类(propTypes)校验
React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...
- React中使用 PropTypes 进行类型检查
官方文档学习链接:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html import React, { Component ...
- react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types
最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本: ...
- react中使用prop-types检测props数据类型
一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...
- 十分钟学习 react配套的类型检测库——prop-types的运用
js 有时在定义变量的类型为number 或string 时并不会报错,所以prop-types 是专门用来检测react ,以前的版本是把它放到react架构里面 ,现在作为一个独立的库搬出来了,跟 ...
- 十、React 父组件传来值的类型控制propTypes、父组件如果不传值defaultProps
父组件给子组件传值时: 1.defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值: 2.propTypes:验证父 ...
- react 中的PropTypes与DefaultProps
每个组件都有自己的props参数,这参数是从父组件接收的一些属性.那我们应该如何对参数的类型做校验,如何定义参数的默认值呢? 1.使用PropTypes校验父组件传过来的参数是否合法 import P ...
- react中prop-types的使用
什么是prop-types?prop代表父组件传递过来的值,types代表类型.简单来说就是用来校验父组件传递过来值的类型 import PropTypes from 'prop-types'; To ...
随机推荐
- 使用CSS让元素尺寸缩小时保持宽高比例一致
CSS中有一个属性padding对元素宽度存在依存关系.如果一个元素的 padding属性以百分比形式表示,padding 的大小是以该元素自身宽度为参照的. 若想要元素尺寸变化时,宽高比例不变,可以 ...
- 深度学习应用系列(二) | 如何使用keras进行迁移学习,以训练和识别自己的图片集
本文的keras后台为tensorflow,介绍如何利用预编译的模型进行迁移学习,以训练和识别自己的图片集. 官网 https://keras.io/applications/ 已经介绍了各个基于Im ...
- EasyUI学习总结(六)——EasyUI布局(转载)
本文转载自:http://www.cnblogs.com/xdp-gacl/p/4088198.html 一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必 ...
- Codeforces 550 D. Regular Bridge
\(>Codeforces \space 550 D. Regular Bridge<\) 题目大意 :给出 \(k\) ,让你构造出一张点和边都不超过 \(10^6\) 的无向图,使得每 ...
- 【bzoj2190】[SDOI2008]仪仗队 数论 欧拉函数 筛法
http://www.lydsy.com/JudgeOnline/problem.php?id=2190 裸欧拉函数,先不计算对角线(a,a)的一列,然后算出1到n-1的所有欧拉函数相加*2,再加 ...
- 【高斯消元】BZOJ1013-[JSOI2008]球形空间产生器sphere
[题目大意] 给出n维空间中给出n+1个点的坐标,求出球心坐标. [思路] 令球心坐标为x1,x2...xn,假设当前第i个点坐标为a1,a2...,an,第i+1个点坐标为b1,b2...,bn,则 ...
- [转]MySql中创建序列的方法
CREATE TABLE `my_seq` ( `seq` int(10) NOT NULL default 10000) ENGINE=MyISAM DEFAULT CHARSET=utf8 ...
- 8VC Venture Cup 2016 - Elimination Round F. Group Projects dp
F. Group Projects 题目连接: http://www.codeforces.com/contest/626/problem/F Description There are n stud ...
- java.lang.RuntimeException: com.intellij.ide.plugins.PluginManager
描述: 在mac电脑上的Android Studio.因为项目需求,加载plugins中的dart和Flutter插件.经过***后,依然无法从AS中加载进来. 曲折到Jetbrains官网下载了da ...
- 论MORMOT序列的JSON格式
论MORMOT序列的JSON格式 JSON 数据使用 UTF-8 编码 BLOB 字段值会用 Base64编码 JSON数据是一个对象数组: [ {"col1":val11,&qu ...