Comment utiliser la vérification des accessoires dans le didacticiel React

Cet article présente principalement l'utilisation spécifique de la validation des accessoires (Props Validation) dans le didacticiel React. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer

La vérification des accessoires est une méthode très importante pour. l'utilisation correcte des composants de manière utile. Cela peut éviter de nombreux bugs et problèmes qui peuvent survenir à mesure que votre application devient plus complexe. En outre, cela peut rendre votre programme plus lisible.

Alors, comment vérifier les Props ? C'est en fait très simple, React nous fournit des PropTypes pour la vérification. Lorsque les données que nous transmettons à Props ne sont pas valides (c'est-à-dire que le type de données transmis à Props ne correspond pas au type de données vérifié), un message d'avertissement sera émis sur la console.

Regardez l'exemple ci-dessous

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

Bien sûr, il n'y a rien de mal avec l'exemple ci-dessus. Modifions l'exemple ci-dessus

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

Ensuite, nous retrouverons l'avertissement suivant dans la console

Avertissement : Failed propType : Prop `optionalArray` non valide de type `string` fourni à `Propsva`, `array` attendu.

Il s'agit d'un cas où le type de données de Props est vérifié. Une autre situation consiste à vérifier si Props a une valeur. Regardez le code suivant

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 après React.PropTypes.array et React.PropTypes.bool, indiquant que optionnelArray et optionnelBool doivent avoir des valeurs

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

Dans le code ci-dessus, nous supprimons optionalArray et optionnelBool, puis exécutons le code dans le navigateur, vous constaterez que la console signale l'erreur suivante

Avertissement : Échec du propType : le prop requis `optionalArray` n'a pas été spécifié dans `Propsva`.
Avertissement : Échec du propType : le prop requis `optionalBool` n'a pas été spécifié dans ` Propsva `.

Bien sûr, ce qui précède ne sont que deux situations simples. Il existe de nombreuses choses et formes de vérification pour la vérification des Props. Pour plus de détails, nous pouvons nous référer à la documentation officielle de React.

Ici, nous avons un point de connaissance qui doit être expliqué, qui est getDefaultProps. Il s'agit de l'affectation par défaut aux accessoires. Regardez le code ci-dessous

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() peut garantir que lorsque le composant parent ne passe pas dans Props, il peut garantir que le composant actuel a les Props par défaut valeur. Il convient de noter que les résultats renvoyés par getDefaultProps seront mis en cache. Par conséquent, nous pouvons utiliser Props directement sans avoir à écrire manuellement du code répétitif dénué de sens.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!