六.PropTypes

Posted 2020-08-08 约翰·史密斯

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

组件类的 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

})