react Props 验证 propTypes，
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var title = "my react";
var MyTitle = React.createClass({
propTypes : {
title:React.PropTypes.string.isRequired,
},
render : function () {
return (
<h1>1111 : {this.props.title}</h1>
)
}
})
React.render(
<MyTitle title={title} />,
document.getElementById('example')
)
</script>
上面是验证正确
下面将title 改成number值 1
Props 验证
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，如果是一个数字则会报错 ：
更多验证如下
react Props 验证 propTypes，的更多相关文章
- React——props的使用以及propTypes
组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...
- React 学习(二) ---- props验证与默认属性
在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...
- react的props验证
Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效. 当向 props 传入无 ...
- 【React系列】Props 验证
Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效.当向 props 传入无效 ...
- 关于React.PropTypes的废除，以及新版本下的react的验证方式
React.PropTypes是React用来typechecking的一个属性.要在组件的props上运行typechecking,可以分配特殊的propTypes属性: class Greetin ...
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...
- [React] Validate Custom React Component Props with PropTypes
In this lesson we'll learn about how you can use the prop-types module to validate a custom React co ...
- react篇章-React Props-Props 验证
React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...
- react~props和state的介绍与使用
props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...
随机推荐
- Programming Language A 学习笔记（一）
SML(一) 1. ML是一个函数式编程语言,理论基础为λ演算. 2. 变量声明 val x = e; 标准类型:单元(unit).布尔(bool).整型(int).字符串(string).实数(re ...
- Matlab读取数据中出现的问题
在运行Matlab读取一段数据并做处理的时候,常常会提示服务器错误,但是等待一会再次运行就会成功运行. 代码如下: clc; clear all; [~,~,rawdata] = xlsread('进 ...
- CodeForces 618A Slime Combining
http://www.codeforces.com/contest/618/problem/A 明明觉得是水题,而我却做了一个小时. 明明觉得代码没有错,而我却错了好几次. 因为我的名字不叫明明,也不 ...
- HTML5开发手机应用--viewport的作用
在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...
- Odoo 报表中添加空格
如果 不起作用,请用 代替.
- Odoo 二次开发教程(四)-只读、唯一性验证和ORM方法介绍
一.只读和唯一性验证 只读的设置有两种方法,一种是实在字段定义时设置为只读,第二种是在页面视图中进行设置. 接前例,我们将学生(tech.student)的名字name字段设置成只读. 方法一:字段定 ...
- HTML学习有感
自从到大三之后一直在纠结课下去学些什么,刚开始一直在学PS,当时学的还算可以,可以一段时间不用之后就忘记了,这使我很郁闷!之后一直想学JAVA,跟已经工作的同学讨来了相关的视屏资料以及他培训时的笔记: ...
- jQuery下的轮播
以前用js做过轮播 今天用JQ插件是最基本的 在官网可以下 布局:<body><div id="div1"> <ul id="lunbo&q ...
- snmp学习笔记
snmp5.5 client 包含头文件 #include <net-snmp/net-snmp-config.h> #include <net-snmp/net-snmp-incl ...
- Android动画
[浅谈Android动画] 总共四种:Tween Animation变换动画.Frame Animation帧动画 Layout Animation布局动画.Property Animation 属性 ...