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

  1. react篇章-React Props

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...

  2. react篇章-React State(状态)-组件都是真正隔离的

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  3. react篇章-React State(状态)-数据自顶向下流动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  4. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

  5. react篇章-React State(状态)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. react篇章-React 组件-复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  7. react篇章-React 组件-向组件传递参数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  8. react篇章-React 组件-ES6 class 来定义一个组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. React篇章-React 组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

随机推荐

  1. uploadify IE11 不兼容问题（不显示图片）

    1.进入uploadify官网demo  :  http://www.uploadify.com/demos/ 2.  显示   (确认flash为最新版本) 3.更换其它浏览器一切正常 4.原因:I ...

  2. angularJS $watch $apply $digest

    看O'Reilly的书看到$watch这部分,不过没看懂,网上很多资料也含糊不清,不过还是找到了几个好的,简单记录一下. 一句话说明,$watch是用来监视变量的,好了直接上代码 <html&g ...

  3. Github遇到Permanently added the RSA host key for IP address '52.74.223.119' to the list of known hosts.

    警告:为IP地址192.30.252.128的主机(RSA连接的)持久添加到hosts文件中,那就来添加吧! 解决办法: vim /etc/hosts 添加一行:52.74.223.119 githu ...

  4. java项目中Excel文件预览

    package com.linkonworks.df.busi.utils; import java.io.File; import java.io.FileInputStream; import j ...

  5. www.sojson.com网站高级JS加密破解

    在网上冲浪,看到了一个网站的JS加密,下面有一句话: 乍一看这句话吓一跳,我去这么猛,然后就很有兴趣想看看究竟是怎样一种加密算法. 对于破解JS加密算法的时候,都是先输入一个简单的语句然后分析加密后语 ...

  6. [转]KMP 算法

    KMP 算法,俗称“看毛片”算法,是字符串匹配中的很强大的一个算法,不过,对于初学者来说,要弄懂它确实不易.整个寒假,因为家里没有网,为了理解这个算法,那可是花了九牛二虎之力!不过,现在我基本上对这个 ...

  7. python的面对对象

    创建类 使用 class 语句来创建一个新类,class 之后为类的名称并以冒号结尾: class ClassName: '类的帮助信息' #类文档字符串 class_suite #类体 类的帮助信息 ...

  8. Once you eliminate all the other factors,the only thing remaining must be the truth.

    Once you eliminate all the other factors,the only thing remaining must be the truth. 一旦你排除了杂因,剩下的一定是 ...

  9. 十、springcloud之Consul注销实例

    @Autowired //com.ecwid.consul.v1.ConsulClient private ConsulClient consulClient; @PostMapping(" ...

  10. URL的井号

    2010年9月,twitter改版. 一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为 http://twitter.com/username 改版后,就变 ...