Validation des accessoires dans React

1. Que sont les accessoires dans React ?

props (abréviation de "propriétés") sont un mécanisme permettant de transmettre des gestionnaires de données et d'événements d'un composant à un autre, généralement d'un composant parent à un composant enfant.

Composant parent

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

Composant enfant qui reçoit des accessoires

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

2. Pourquoi valider les accessoires ?

La validation des accessoires garantit qu'un composant reçoit le type de données correct et que les accessoires requis sont fournis. Cela aide à :

• Prévenir les bugs.

• Rendre le composant plus prévisible

Par exemple, si un composant attend une chaîne mais reçoit un nombre, cela peut entraîner un comportement inattendu.

3. Utilisation des PropTypes pour la validation

React fournit un package appelé prop-types qui vous permet d'appliquer la validation des props. Si les accessoires transmis au composant ne correspondent pas aux types attendus, React enregistrera les avertissements dans la console.

4. Installation du package prop-types

Si vous travaillez dans un nouveau projet React, vous devrez peut-être d'abord installer le package prop-types :

npm install prop-types

5. Définir des PropTypes dans un composant

Vous pouvez définir des types d'accessoires en ajoutant l'objet propTypes à votre composant.

import PropTypes from 'prop-types';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

ici : Ajout de PropTypes pour valider la prop "name"
Attendre que "nom" soit une chaîne obligatoire

6. Types d'accessoires courants

Voici quelques types courants de validations d'accessoires que vous pouvez appliquer :

1. Types primitifs :

• PropTypes.string - Garantit que l'accessoire est une chaîne.
• PropTypes.number - Garantit que l'accessoire est un nombre.
• PropTypes.bool - Garantit que l'accessoire est un booléen.
• PropTypes.func - Garantit que l'accessoire est une fonction.
• PropTypes.object - Garantit que l'accessoire est un objet.
• PropTypes.array - Garantit que l'accessoire est un tableau.
• PropTypes.node - Garantit que l'accessoire est tout contenu rendu (nombres, chaînes, éléments,

2. Accessoires requis : Utilisez .isRequired pour garantir qu'un accessoire est transmis :

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

3. Tableaux d'un certain type : Vous pouvez valider les tableaux pour vous assurer que leur contenu est d'un type spécifique :

MyComponent.propTypes = {
  items: PropTypes.arrayOf(PropTypes.string).isRequired, // Array of strings
};

4. Objets d'une certaine forme :

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }).isRequired,
};

5. Fait partie d'un ensemble de valeurs : Vous pouvez imposer qu'un accessoire soit l'une des plusieurs valeurs spécifiées :

MyComponent.propTypes = {
  status: PropTypes.oneOf(['success', 'error', 'loading']).isRequired,
};

6. Validation des accessoires personnalisés : Vous pouvez créer votre propre logique de validation personnalisée :

MyComponent.propTypes = {
  age: function (props, propName, componentName) {
    if (props[propName] < 18) {
      return new Error(
        `${propName} in ${componentName} must be at least 18 years old`
      );
    }
  },
};

7. Exemple de validation d'accessoires

Créons un composant qui attend plusieurs types d'accessoires et validons-les :

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

8. Accessoires par défaut

Vous pouvez également définir des accessoires par défaut à l'aide de defaultProps au cas où aucun accessoire ne serait fourni.

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

9. Gestion des types d'accessoires non valides

Si un type d'accessoire est incorrect, React enregistrera un avertissement dans la console du navigateur, mais l'application fonctionnera toujours. Il est important de noter que les PropTypes ne s'exécutent qu'en mode développement (c'est-à-dire qu'ils ne s'exécutent pas dans les versions de production).

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!