How to use Props verification in React tutorial

This article mainly introduces the specific usage of Props verification (Props Validation) in the React tutorial. It is of great practical value. Friends in need can refer to it.

Props verification is a very important method for the correct use of components. useful way. It can avoid many bugs and problems that may arise as your application becomes more complex. Also, it can make your program more readable.

So how to verify Props? It’s actually very simple. React provides us with PropTypes for verification. When the data we pass to Props is invalid (that is, the data type passed to Props does not match the verified data type), a warning message will be issued on the console.

Look at the example below

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 id="Array-this-props-optionalArray">Array:{this.props.optionalArray}</h3>
        <h3 id="Bool-this-props-optionalBool">Bool:{this.props.optionalBool}</h3>
        <h3 id="Func-click">Func:click</h3>
        <h3 id="Number-this-props-optionalNumber">Number:{this.props.optionalNumber}</h3>
        <h3 id="Object-this-props-optionalObject-object">Object:{this.props.optionalObject.object1}</h3>
        <h3 id="Object-this-props-optionalObject-object">Object:{this.props.optionalObject.object2}</h3>
        <h3 id="Object-this-props-optionalObject-object">Object:{this.props.optionalObject.object3}</h3>
        <h3 id="String-this-props-optionalString">String:{this.props.optionalString}</h3>
      </p>
    );
  }
});
ReactDOM.render(
  <Propsva />,
  document.getElementById(&#39;content&#39;)
);

Of course, there is nothing wrong with the above example. Let's modify the above example

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

Then we will find the following warning in the console

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

This is a situation where the data type of Props is verified. Another situation is to verify whether Props has a value. Look at the code below

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

Add isRequired after React.PropTypes.array and React.PropTypes.bool, indicating that optionalArray and optionalBool must have values

getDefaultProps:function(){
  return {
    optionalFunc: function (arg) {
      console.log(arg);
    },
    optionalNumber: 3,
    optionalObject: {
      object1: "objectvalue1",
      object2: "objectvalue2",
      object3: "objectvalue3",
    },
    optionalString: "My Onmpw",
  };
},

In the above code, we remove optionalArray and optionalBool, and then run the code in the browser, you will find that the console reports the following error

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

Of course, the above are just two simple situations. There are many things and forms of verification for Props verification. For details, we can refer to the React official documentation.

Here we have a knowledge point that needs to be explained, which is getDefaultProps. This is the default assignment to Props. Look at the code below

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

getDefaultProps() can ensure that when the parent component does not pass in Props, it can ensure that the current component has the default Props value. It should be noted that the return results of getDefaultProps will be cached. Therefore, we can use Props directly without having to manually write some meaningless repetitive code.

The above is the detailed content of How to use Props verification in React tutorial. For more information, please follow other related articles on the PHP Chinese website!