這篇文章主要介紹了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')
);以上是React教程之Props驗證使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
