Props-Validierung in React

1. Was sind Requisiten in React?

Requisiten (kurz für „Eigenschaften“) sind ein Mechanismus zum Übergeben von Daten und Ereignishandlern von einer Komponente an eine andere, normalerweise von einer übergeordneten Komponente an eine untergeordnete Komponente.

Übergeordnete Komponente

import React from 'react';

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

export default App;

Untergeordnete Komponente, die Requisiten erhält

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

2. Warum Requisiten validieren?

Durch die Validierung von Requisiten wird sichergestellt, dass eine Komponente den richtigen Datentyp empfängt und die erforderlichen Requisiten bereitgestellt werden. Dies hilft:

• Bugs verhindern.

• Machen Sie die Komponente vorhersehbarer

Wenn eine Komponente beispielsweise eine Zeichenfolge erwartet, aber eine Zahl empfängt, kann dies zu unerwartetem Verhalten führen.

3. Verwendung von PropTypes zur Validierung

React stellt ein Paket namens prop-types bereit, mit dem Sie die Prop-Validierung erzwingen können. Wenn die an die Komponente übergebenen Requisiten nicht den erwarteten Typen entsprechen, protokolliert React Warnungen in der Konsole.

4. Installieren des Prop-Types-Pakets

Wenn Sie an einem neuen React-Projekt arbeiten, müssen Sie möglicherweise zuerst das Prop-Types-Paket installieren:

npm install prop-types

5. Definieren von PropTypes in einer Komponente

Sie können Requisitentypen definieren, indem Sie das propTypes-Objekt zu Ihrer Komponente hinzufügen.

import PropTypes from 'prop-types';

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

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

hier: Hinzufügen von PropTypes zur Validierung der „Name“-Requisite
Es wird erwartet, dass „name“ eine erforderliche Zeichenfolge ist

6. Gemeinsame PropTypes

Hier sind einige gängige Arten von Requisitenvalidierungen, die Sie anwenden können:

1. Primitive Typen:

• PropTypes.string – Stellt sicher, dass die Requisite eine Zeichenfolge ist.
• PropTypes.number – Stellt sicher, dass die Requisite eine Zahl ist.
• PropTypes.bool – Stellt sicher, dass die Requisite ein boolescher Wert ist.
• PropTypes.func – Stellt sicher, dass die Requisite eine Funktion ist.
• PropTypes.object – Stellt sicher, dass die Requisite ein Objekt ist.
• PropTypes.array – Stellt sicher, dass die Requisite ein Array ist.
• PropTypes.node – Stellt sicher, dass es sich bei der Requisite um jeden darstellbaren Inhalt (Zahlen, Zeichenfolgen, Elemente usw.) handelt

2. Erforderliche Requisiten: Verwenden Sie .isRequired, um zu erzwingen, dass eine Requisite übergeben wird:

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

3. Arrays eines bestimmten Typs: Sie können Arrays validieren, um sicherzustellen, dass ihre Inhalte von einem bestimmten Typ sind:

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

4. Objekte einer bestimmten Form:

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

5. Einer aus einer Reihe von Werten: Sie können erzwingen, dass eine Requisite einer von mehreren angegebenen Werten ist:

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

6. Benutzerdefinierte Prop-Validierung: Sie können Ihre eigene benutzerdefinierte Validierungslogik erstellen:

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. Beispiel für die Validierung von Requisiten

Lassen Sie uns eine Komponente erstellen, die mehrere Arten von Requisiten erwartet, und diese validieren:

import React from 'react';

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

export default App;

8. Standard-Requisiten

Sie können mit defaultProps auch Standard-Requisiten definieren, falls keine Requisite bereitgestellt wird.

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

9. Umgang mit ungültigen Requisitentypen

Wenn ein Requisitentyp falsch ist, protokolliert React eine Warnung in der Browserkonsole, die Anwendung funktioniert jedoch weiterhin. Es ist wichtig zu beachten, dass PropTypes nur im Entwicklungsmodus ausgeführt werden (d. h. nicht in Produktions-Builds).

Das obige ist der detaillierte Inhalt vonProps-Validierung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!