<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. Lattice Codes

    最近在做的一些关于lattice codes的工作,想记录下来. 首先,我认为lattice coding是一种联合编码调制技术,将消息序列映射到星座点.其中一个良好的性质是lattice point ...

  2. JVM内存管理&GC

    一.JVM内存划分 |--------------------|-------------PC寄存器-------| |----方法区 ---------|--------------java 虚拟机 ...

  3. ShowMessageFmt 用法

    举例:ShowMessageFmt('n1:%x; n2:%x', [n1,n2]);  显示Params 为 array[integer] of TvarRec 进制表示 %o(8)   print ...

  4. 移动web资源整理

    [原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快--低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一--兼容问题多 网络更复杂--弱网 ...

  5. log4j 配置INFO 和DEBUG 分布输出至两个文件

    博客地址: http://blog.csdn.net/wangchsh2008/article/details/8812857

  6. CustomUI Direct3D9_Sample

    刚开始建这个项目的时候编译器报了很多Link2019的错误. 后来添加了一些lib文件才解决,参考    缺少.lib文件导致的Link2019 解决方案汇总 ==================== ...

  7. 在Andoid开发中使用MVP模式来解耦，增加可测试性

    by Jeff Angelini posted on 7/20/2011 2:35:00 PM 将应用程序UI的表现从Ui的逻辑中分离是一个好的想法.这种分离减少了代码耦合,代码更加干净, 甚至可以有 ...

  8. Array.prototype.filter()的实现

    来源 今年某前端笔试的一道题,大概就是实现一遍filter,包括一个可以改变上下文的要求,其实就是改变this啦,跟原生的filter一样的功能跟参数. 解析 filter的功能就是过滤,传入一个函数 ...

  9. Java反编译代码对齐

    使用反编译的代码作为jar包源码进行调试时,经常会遇到的情况是反编译后的源码之在注释里包含行号,但是与代码所在行经常对应不上.这个时候,就有必要对代码进行对齐了. ​ public class Reo ...

  10. Spring的三种通过XML实现DataSource注入方式

    Spring的三种通过XML实现DataSource注入方式: 1.使用Spring自带的DriverManagerDataSource 2.使用DBCP连接池 3.使用Tomcat提供的JNDI