這篇文章主要介紹了React教程之Props驗證的具體用法(Props Validation),非常具有實用價值,需要的朋友可以參考下
Props驗證對於組件的正確使用是一種非常有用的方式。它可以避免隨著你的應用的程式越來越複雜而出現很多的bug和問題。並且,它還可以是你的程式變得更易讀。
那如何對Props進行驗證呢,其實很簡單,React為我們提供了PropTypes以供驗證使用。當我們向Props傳入的資料無效(也就是向Props傳入的資料型別和驗證的資料型別不符)就會在控制台發出警告訊息。
看下面的例子
var Propsva = React.createClass({ propTypes: { optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, }, getDefaultProps:function(){ return { optionalArray: ['onmpw.com','——迹忆博客'], optionalBool: true, optionalFunc: function (arg) { console.log(arg); }, optionalNumber: 3, optionalObject: { object1: "objectvalue1", object2: "objectvalue2", object3: "objectvalue3", }, optionalString: "My Onmpw", }; }, render:function(){ return ( <p> <h3>Array:{this.props.optionalArray}</h3> <h3>Bool:{this.props.optionalBool}</h3> <h3 onClick={this.props.optionalFunc}>Func:click</h3> <h3>Number:{this.props.optionalNumber}</h3> <h3>Object:{this.props.optionalObject.object1}</h3> <h3>Object:{this.props.optionalObject.object2}</h3> <h3>Object:{this.props.optionalObject.object3}</h3> <h3>String:{this.props.optionalString}</h3> </p> ); } }); ReactDOM.render( <Propsva />, document.getElementById('content') );
當然,上面這個例子是沒有錯誤的。下面我們將上面的範例進行修改
getDefaultProps:function(){ return { optionalArray: 'onmpw.com——迹忆博客', optionalBool: true, optionalFunc: function (arg) { console.log(arg); }, optionalNumber: 3, optionalObject: { object1: "objectvalue1", object2: "objectvalue2", object3: "objectvalue3", }, optionalString: "My Onmpw", }; },
然後,我們會在控制台中發現有如下的警告
Warning: Failed propType: Invalid prop `optionalArray` of type `string` supplied to `Propsva`, expected `array`.
這是一種情況,驗證Props的資料類型。還有一種情況就是驗證Props是否有值。看下面的程式碼
propTypes: { optionalArray: React.PropTypes.array.isRequired, optionalBool: React.PropTypes.bool.isRequired, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, },
在React.PropTypes.array和React.PropTypes.bool後面加上isRequired,表示optionalArray和optionalBool兩個項目是必須有值的
getDefaultProps:function(){ return { optionalFunc: function (arg) { console.log(arg); }, optionalNumber: 3, optionalObject: { object1: "objectvalue1", object2: "objectvalue2", object3: "objectvalue3", }, optionalString: "My Onmpw", }; },
在上面程式碼中我們將optionalArray和optionalBool去掉,然後再去瀏覽器中執行程式碼,會發現控制台封包如下的錯誤
#Warning: Failed propType: Required prop `optionalArray` was not specified in `Propsva`.
Warning: Failed propType: Required prop `optionalBool` was not specified in `Props`.
var ComponentDefaultProps = React.createClass({ getDefaultProps: function() { return { value: 'Default Value' }; }, render:function(){ return ( <p>{this.props.value}</p> ) } }); ReactDOM.render( <ComponentDefaultProps />, document.getElementById('content') );getDefaultProps()可以保證,當父級元件沒有傳入Props的時候,可以保證目前元件有預設的Props的值。要注意的是,getDefaultProps的回傳結果是會被快取起來的。因此,我們可以直接使用Props,而沒有必要再手動編寫一些沒有意義的重複的程式碼。
以上是React教程之Props驗證使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!