React中怎么實現Props驗證

本文小編為大家詳細介紹“React中怎么實現Props驗證”，內容詳細，步驟清晰，細節處理妥當，希望這篇“React中怎么實現Props驗證”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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&mdash;&mdash;跡憶博客',
        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，而沒有必要再手動編寫一些沒有意義的重復的代碼。

讀到這里，這篇“React中怎么實現Props驗證”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。