react篇章-React Props-Props 验证
React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串 ：
React 16.4 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<script type="text/babel">
// var title = "zzzzw";
var title = 123;
class MyTitle extends React.Component {
render() {
return (
<h1>Hello, {this.props.title}</h1>
);
}
} MyTitle.propTypes = {
title: PropTypes.string
};
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
</script> </body>
</html>
React 15.4 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/15.4.2/react.min.js"></script>
<script src="https://cdn.staticfile.org/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var title = "菜鸟教程";
// var title = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
}, render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
</script>
</body>
</html>
更多验证器说明如下：
MyComponent.propTypes = {
// 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 可以被渲染的对象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 可以是多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
}
}
react篇章-React Props-Props 验证的更多相关文章
- react篇章-React Props
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...
- react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-数据自顶向下流动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
- react篇章-React State(状态)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-复合组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-向组件传递参数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-ES6 class 来定义一个组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- React篇章-React 组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
随机推荐
- IntelliJ IDEA连接cvs超时Error refreshing view: Timeout while trying to connect to host
在使用IntelliJ IDEA连接cvs的时候,有时会报超时错误: Error refreshing view: Timeout while trying to connect to host: 1 ...
- Elasticsearch技术解析与实战（三）文档的聚合
1.计算每个tag下的商品数量 PUT /database/_mapping/product { "properties": { "tags": { " ...
- 使用Console命令调试JS
一.console 的对象常用的方法 1.console.log(object[, object, ...])使用频率最高的一条语句:向控制台输出一条消息.支持 C 语言 printf 式的格式化输出 ...
- Android Dalvik和JVM的区别
JVM运行的Java字节码,它从.class文件或Jar包中加载字节码然后执行: Dalvik 运行的是 dex 文件(Dalvik Executable),生成APK时,Dx工具把所有.class文 ...
- 一个罕见的MSSQL注入漏洞案例
一个罕见的MSSQL注入漏洞案例 这里作者准备分享一个在去年Google赏金计划中发现的相当罕见漏洞,也是作者在整个渗透测试生涯中唯一一次遇到的. 目标网站使用了微软 SQL Server 数据库并且 ...
- Hibernate5笔记9--Hibernate注解式开发
Hibernate注解式开发: (1)注解式开发的注意点: Hibernate中使用注解,主要是为了替代映射文件,完成“类到表,属性到字段”的映射. JPA提供了一套功能强大的注解.Hibernat ...
- go 匿名函数和闭包
匿名函数 1. 函数也是一种类型,因此可以定义作为一个函数类型的变量 package main import "fmt" // 函数作为参数 func add(a, b int) ...
- Linux USB驱动学习总结（一）---- USB基本概念及驱动架构
USB,Universal Serial Bus(通用串行总线),是一个外部总线标准,用于规范电脑与外部设备的连接和通讯.是应用在PC领域的接口技术.USB接口支持设备的即插即用和热插拔功能.USB是 ...
- select()函数用法一
select()函数用法以及FD_ZERO.FD_SET.FD_CLR.FD_ISSET select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复用 ...
- 使用ubifs格式的根文件系统
配置内核,使其支持ubifs文件系统 1)Device Drivers --->Memory Technology Device (MTD) support --->UBI - Uns ...