React教程之Props驗證的具體用法（Props Validation）

來源：懂視網責編：小采時間：2020-11-27 22:31:13

React教程之Props驗證的具體用法（Props Validation）

React教程之Props驗證的具體用法（Props Validation）:Props驗證對于組件的正確使用是一種非常有用的方式。它可以避免隨著你的應用的程序越來越復雜從而出現很多的bug和問題。并且，它還可以是你的程序變得更易讀。那如何對Props進行驗證呢，其實很簡單，React為我們提供了PropTypes以供驗證使用。當我們向Pro

推薦度：

點擊下載本文 文檔為doc格式

導讀React教程之Props驗證的具體用法（Props Validation）:Props驗證對于組件的正確使用是一種非常有用的方式。它可以避免隨著你的應用的程序越來越復雜從而出現很多的bug和問題。并且，它還可以是你的程序變得更易讀。那如何對Props進行驗證呢，其實很簡單，React為我們提供了PropTypes以供驗證使用。當我們向Pro

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 (
 <div>
 <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>
 </div>
 );
 }
});
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 `Propsva`.

當然，上面只是簡單的兩種情況。對于Props的驗證，還有很多的東西，驗證的形式也有很多，具體我們可以參考React官方文檔。

這里我們有一個知識點需要說明一下，就是getDefaultProps。這是默認給Props賦值。看下面的代碼

var ComponentDefaultProps = React.createClass({
 getDefaultProps: function() {
 return {
 value: 'Default Value'
 };
 },
 render:function(){
 return (
 <div>{this.props.value}</div>
 )
 }
});
ReactDOM.render(
 <ComponentDefaultProps />,
 document.getElementById('content')
);

getDefaultProps()可以保證，當父級組件沒有傳入Props的時候，可以保證當前組件有默認的Props的值。需要注意的是，getDefaultProps的返回結果是會被緩存起來的。因此，我們可以直接使用Props，而沒有必要再手動編寫一些沒有意義的重復的代碼。

對于Props的驗證，就介紹到這里。希望本文對大家有所幫助。也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com