快捷導(dǎo)航

React教程之Props驗(yàn)證的具體用法（Props Validation）

更新時(shí)間：2017年09月04日 10:00:45 作者：跡憶

這篇文章主要介紹了React教程之Props驗(yàn)證的具體用法（Props Validation），非常具有實(shí)用價(jià)值，需要的朋友可以參考下

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

那如何對Props進(jìn)行驗(yàn)證呢，其實(shí)很簡單，React為我們提供了PropTypes以供驗(yàn)證使用。當(dāng)我們向Props傳入的數(shù)據(jù)無效（也就是向Props傳入的數(shù)據(jù)類型和驗(yàn)證的數(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——跡憶博客',
    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`.

這是一種情況，驗(yàn)證Props的數(shù)據(jù)類型。還有一種情況就是驗(yàn)證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兩項(xiàng)是必須有值的

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)控制臺報(bào)如下的錯誤

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的驗(yàn)證，還有很多的東西，驗(yàn)證的形式也有很多，具體我們可以參考React官方文檔。

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

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

您可能感興趣的文章: