<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，的更多相关文章

  1. React——props的使用以及propTypes

    组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...

  2. React 学习(二) ---- props验证与默认属性

    在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...

  3. react的props验证

    Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效. 当向 props 传入无 ...

  4. 【React系列】Props 验证

    Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效.当向 props 传入无效 ...

  5. 关于React.PropTypes的废除，以及新版本下的react的验证方式

    React.PropTypes是React用来typechecking的一个属性.要在组件的props上运行typechecking,可以分配特殊的propTypes属性: class Greetin ...

  6. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  7. [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 ...

  8. react篇章-React Props-Props 验证

    React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...

  9. react~props和state的介绍与使用

    props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...

随机推荐

  1. 【转载】Java集合类Array、List、Map区别和联系

    Java集合类主要分为以下三类: 第一类:Array.Arrays第二类:Collection :List.Set第三类:Map :HashMap.HashTable 一.Array , Arrays ...

  2. 面试题：给定数组a，找到最大的j-i, 使a[j]>a[i]

    第一种方法: 用两重循环对每对点都试一下,然后取最大值即可,时间复杂度为O(n2) #include <iostream> #include <algorithm> using ...

  3. android studio 报错-----R全部显示红色 ---- .9图片报错

    导入android项目后,R全部变红,控制台有下面的提示 意思是缺少一些资源,比如说图片之类的,然后我发现确实少了一张图片资源,导入图片资源后,依旧报错,如下  Error:Execution fai ...

  4. BestCoder Round #80 1002

    HDU 5666 Segment 题意:给你条斜率为-1,常数项为q(q为质数)的直线,连接原点与直线上整数格点,问你在有多少个格点在形成的无数个三角形内,而不在线段上,结果对P取模. 思路:best ...

  5. [RxJava^Android]项目经验分享 --- RxLifecycle功能实现分析（二）

      接着上一篇文章的内容,这篇文章一边分析RxLifecycle的实现原理,一边学习RxJava操作符. 首先RxLifecycle在基础类里定义BehaviorSubject并绑定Activity或 ...

  6. block和代理小结

    代理使用原则: 代理方法的参数是要传的值,代理方法的返回值是要得到的值(即要调用的类回传的值),并且在实现的代理方法中的值就是原来的类要传的值(设置delegate=self),  比如2个类 A,B ...

  7. ubuntu install eclipse-installer

    1. sudo mkdir /usr/eclipseInstaller 2. tar -zxvf eclipse-inst-linux64.tar.gz -C /usr/eclipseInstalle ...

  8. Ubuntu14.10搭建C++开发环境

    方法一：1、安装Eclipsesudo apt-get install eclipse2、安装Eclipse CDTsudo apt-get install eclipse-cdt3、安装Autoto ...

  9. Github+Jekyll —— 创建个人免费博客（一）从零开始

    摘要: 本文中我将介绍一下如何在github上搭建个人Blog(博客),也顺便让我们掌握一下github Pages功能,另外还涉及到Jekyll技术. ======================= ...

  10. 浅谈数据库优化方案--表和SQL

    1.数据类型的选择 1.字段最好设置为非空.若字段为char(8),即便是NULL也会现有8个字符的空间. 2.尽量使用数字型字段,若只含数值信息的字段尽量不要设计为字符型,这会降低查询和连接的性能, ...