React中怎么實現(xiàn)Props驗證

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

Props驗證對于組件的正確使用是一種非常有用的方式。它可以避免隨著你的應(yīng)用的程序越來越復(fù)雜從而出現(xiàn)很多的bug和問題。并且，它還可以是你的程序變得更易讀。

那如何對Props進(jìn)行驗證呢，其實很簡單，React為我們提供了PropTypes以供驗證使用。當(dāng)我們向Props傳入的數(shù)據(jù)無效（也就是向Props傳入的數(shù)據(jù)類型和驗證的數(shù)據(jù)類型不符）就會在控制臺發(fā)出警告信息。

看下面的例子

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')
);

當(dāng)然，上面這個例子是沒有錯誤的。下面我們將上面的例子進(jìn)行修改

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",
    };
},

然后，我們會在控制臺中發(fā)現(xiàn)有如下的警告

Warning: Failed propType: Invalid prop `optionalArray` of type `string` supplied to `Propsva`, expected `array`.

這是一種情況，驗證Props的數(shù)據(jù)類型。還有一種情況就是驗證Props是否有值?？聪旅娴拇a

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去掉，然后再去瀏覽器中運(yùn)行代碼，會發(fā)現(xiàn)控制臺報如下的錯誤

Warning: Failed propType: Required prop `optionalArray` was not specified in `Propsva`.
Warning: Failed propType: Required prop `optionalBool` was not specified in `Propsva`.

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

這里我們有一個知識點(diǎn)需要說明一下，就是getDefaultProps。這是默認(rèn)給Props賦值?？聪旅娴拇a

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()可以保證，當(dāng)父級組件沒有傳入Props的時候，可以保證當(dāng)前組件有默認(rèn)的Props的值。需要注意的是，getDefaultProps的返回結(jié)果是會被緩存起來的。因此，我們可以直接使用Props，而沒有必要再手動編寫一些沒有意義的重復(fù)的代碼。

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