码迷,mamicode.com
首页 > 其他好文 > 详细

六.PropTypes

时间:2016-09-10 14:40:53      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

组件的属性可以接受任意值,字符串,函数,对象。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。

组件类的 PropTypes属性。就是验证组件实例的属性是否符合要求  

var MyTitle = React.createClass({

  propTypes:{

    title:React.propTypes.string.isRequired,

  }

 

  render:function(){

    return <h1>{this.props.title}</h1>

  }

})

 

上面的MyTitle 有个title属性。PropTypes告诉React这个title属性是必须的。而且它的值是字符串,现在我们设置title的值是一个数值。

var data = 123

ReactDOM.render(

  <MyTitle title={data}/>

  document.body

)

这样一来title就通过不了验证,控制台会显示一行错误信息。

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`

此外 getDefaultProps 可以用来设置属性的默认值

var MyTitle = React.createClass({

  getDefaultProps: function(){

    return (

      title: "Hello world"

    )

  },

 

  render:function(){

    return <h1>{this.props.title}</h1>

  }

})

 

ReactDOM.render({

  <MyTitle />,

  document.body

})

六.PropTypes

标签:

原文地址:http://www.cnblogs.com/johnblog/p/5859318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!