So verwenden Sie die Props-Verifizierung im React-Tutorial

In diesem Artikel wird hauptsächlich die spezifische Verwendung der Props-Validierung (Props-Validierung) im React-Tutorial vorgestellt. Es ist von großem praktischem Wert. Freunde in Not können sich darauf beziehen.

Die Props-Validierung ist eine sehr wichtige Methode die richtige Verwendung von Komponenten. Dadurch können viele Fehler und Probleme vermieden werden, die auftreten können, wenn Ihre Anwendung komplexer wird. Außerdem kann es Ihr Programm besser lesbar machen.

Wie verifiziert man also Props? Es ist eigentlich ganz einfach, uns PropTypes zur Verifizierung zur Verfügung zu stellen. Wenn die Daten, die wir an Props übergeben, ungültig sind (d. h. der an Props übergebene Datentyp stimmt nicht mit dem überprüften Datentyp überein), wird auf der Konsole eine Warnmeldung ausgegeben.

Schauen Sie sich das Beispiel unten an

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>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>
      </p>
    );
  }
});
ReactDOM.render(
  <Propsva />,
  document.getElementById(&#39;content&#39;)
);

Natürlich ist an dem obigen Beispiel nichts auszusetzen. Ändern wir das obige Beispiel

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

Dann finden wir in der Konsole die folgende Warnung

Warnung: Failed propType : Ungültiges Prop „optionalArray“ vom Typ „string“ an „Propsva“ übergeben, erwartetes „Array“.

Dies ist ein Fall, in dem der Datentyp von Props überprüft wird. Eine andere Situation besteht darin, zu überprüfen, ob Props einen Wert hat. Schauen Sie sich den folgenden Code an:

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

Fügen Sie isRequired nach React.PropTypes.array und React.PropTypes.bool hinzu, was darauf hinweist, dass optionalArray und optionalBool Werte

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

Im obigen Code entfernen wir optionalArray und optionalBool und führen dann den Code im Browser aus. Sie werden feststellen, dass die Konsole den folgenden Fehler meldet

Warnung: Fehlgeschlagener PropType: Erforderliche Requisite „optionalArray“ wurde in „Propsva“ nicht angegeben.
Warnung: Fehlgeschlagener PropType: Erforderliche Requisite „optionalBool“ wurde in „Propsva“ nicht angegeben `.

Natürlich sind die oben genannten Situationen nur zwei einfache Situationen. Es gibt viele Dinge und Formen der Verifizierung für die Props-Verifizierung. Weitere Informationen finden Sie in der offiziellen Dokumentation von React.

Hier haben wir einen Wissenspunkt, der erklärt werden muss, nämlich getDefaultProps. Dies ist die Standardzuweisung für Requisiten. Schauen Sie sich den folgenden Code an:

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() kann sicherstellen, dass die aktuelle Komponente über die Standard-Props verfügt, wenn die übergeordnete Komponente keine Props übergibt Wert. Es ist zu beachten, dass die von getDefaultProps zurückgegebenen Ergebnisse zwischengespeichert werden. Daher können wir Props direkt verwenden, ohne manuell bedeutungslosen, sich wiederholenden Code schreiben zu müssen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Props-Verifizierung im React-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!