ReactJS - Props Validation: A Beginner's Guide

Hallo ihr zukünftigen React-Entwickler! Heute tauchen wir in eines der wichtigsten Konzepte in React ein: Props-Validierung. Keine Sorge, wenn ihr mới im Programmieren seid; ich werde euch schrittweise durch führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Lasst uns gemeinsam auf diese aufregende Reise gehen!

Was sind Props?

Bevor wir zur Validierung übergehen, lassen Sie uns schnell nochmals复习 was Props sind. In React sind Props (Kurzform für Eigenschaften) eine Möglichkeit, Daten von einem übergeordneten Komponenten an einen untergeordneten Komponenten zu übergeben. Denkt daran wie Argumente, die ihr einer Funktion übergebt. Sie sind schreibgeschützt und helfen dabei, eure Komponenten dynamischer und wiederverwendbarer zu machen.

Warum Props validieren?

Stellt euch vor,你们的建筑一座房子。 你们不会希望有人 versehentlich Papier anstelle von Ziegeln verwendet, oder? Ähnlich verhält es sich in React, wo wir sicherstellen möchten, dass die richtige Art von Daten an unsere Komponenten übergeben wird. Hier kommt die Props-Validierung ins Spiel.

Props-Validierung hilft uns:

1. Fehler frühzeitig zu entdecken
2. Den Code lesbarer zu machen
3. Als Dokumentation für andere Entwickler zu dienen

Nun tauchen wir ein, wie wir die Props-Validierung in React implementieren können!

PropTypes

React hat eine integrierte Funktion namens PropTypes, die es uns ermöglicht, die Props zu validieren, die unsere Komponenten empfangen. Es ist, als hätte man einen strengen, aber freundlichen Türsteher an der Eingangstür Ihrer Komponente, der überprüft, ob jeder (jede Prop) die richtigen Unterlagen hat, um einzutreten.

PropTypes installieren

Zuerst müssen wir PropTypes installieren. Öffnet eure Konsole und führt aus:

npm install prop-types

Once installed, we can import it into our component file:

import PropTypes from 'prop-types';

PropTypes verwenden

Lassen Sie uns ein einfaches Komponenten erstellen, um zu zeigen, wie man PropTypes verwendet:

import React from 'react';
import PropTypes from 'prop-types';

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

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

export default Greeting;

In diesem Beispiel geben wir React Bescheid, dass die name-Prop eine Zeichenkette sein sollte. Wenn jemand versucht, eine Zahl oder einen anderen Typ zu übergeben, zeigt React eine Warnung im Konsolenfenster an.

Verfügbare Validator

PropTypes bringt eine Vielzahl von Validator mit. Sehen wir uns einige der häufigsten an:

Validator	Beschreibung
PropTypes.string	Validiert, dass die Prop eine Zeichenkette ist
PropTypes.number	Validiert, dass die Prop eine Zahl ist
PropTypes.bool	Validiert, dass die Prop ein Boolean ist
PropTypes.array	Validiert, dass die Prop ein Array ist
PropTypes.object	Validiert, dass die Prop ein Objekt ist
PropTypes.func	Validiert, dass die Prop eine Funktion ist

Sehen wir uns diese in Aktion mit einem komplexeren Beispiel an:

import React from 'react';
import PropTypes from 'prop-types';

function UserProfile({ name, age, isStudent, hobbies, address, onUpdate }) {
return (
<div>
<h2>{name}</h2>
<p>Alter: {age}</p>
<p>Student: {isStudent ? 'Ja' : 'Nein'}</p>
<p>Hobbys: {hobbies.join(', ')}</p>
<p>Stadt: {address.city}</p>
<button onClick={onUpdate}>Profil aktualisieren</button>
</div>
);
}

UserProfile.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isStudent: PropTypes.bool,
hobbies: PropTypes.array,
address: PropTypes.shape({
city: PropTypes.string,
country: PropTypes.string
}),
onUpdate: PropTypes.func
};

export default UserProfile;

Lassen Sie uns das aufschlüsseln:

1. name: PropTypes.string.isRequired: Diese Prop muss eine Zeichenkette sein und ist erforderlich.
2. age: PropTypes.number: Diese Prop sollte eine Zahl sein, aber sie ist nicht erforderlich.
3. isStudent: PropTypes.bool: Diese Prop sollte ein Boolean sein.
4. hobbies: PropTypes.array: Diese Prop sollte ein Array sein.
5. address: PropTypes.shape({...}): Diese Prop sollte ein Objekt mit einer bestimmten Struktur sein.
6. onUpdate: PropTypes.func: Diese Prop sollte eine Funktion sein.

Erweiterte Validator

PropTypes bietet auch erweiterte Validator an:

1. PropTypes.oneOf

Dieser Validator überprüft, ob eine Prop eine von mehreren spezifischen Werten ist:

ColorPicker.propTypes = {
color: PropTypes.oneOf(['rot', 'grün', 'blau'])
};

2. PropTypes.oneOfType

Dieser Validator überprüft, ob eine Prop einem von mehreren Typen entspricht:

AgeDisplay.propTypes = {
age: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])
};

3. PropTypes.arrayOf

Dieser Validator überprüft, ob eine Prop ein Array eines bestimmten Typs ist:

NumberList.propTypes = {
numbers: PropTypes.arrayOf(PropTypes.number)
};

4. PropTypes.objectOf

Dieser Validator überprüft, ob eine Prop ein Objekt mit Werten eines bestimmten Typs ist:

Scores.propTypes = {
scores: PropTypes.objectOf(PropTypes.number)
};

benutzerdefinierte Validator

Manchmal reichen die integrierten Validator nicht aus. Dann kommen benutzerdefinierte Validator zur Rettung! Hier ist ein Beispiel:

function AgeValidator(props, propName, componentName) {
if (props[propName] < 0 || props[propName] > 120) {
return new Error(`Ungültige Prop ${propName} für ${componentName}. Das Alter muss zwischen 0 und 120 liegen.`);
}
}

Person.propTypes = {
age: AgeValidator
};

Dieser benutzerdefinierte Validator stellt sicher, dass das Alter zwischen 0 und 120 liegt.

Schlussfolgerung

Props-Validierung ist wie ein freundlicher Roboter-Assistent, der eure Arbeit für euch überprüft. Es hilft dabei, Fehler frühzeitig zu erkennen, macht den Code robuster und dient als Dokumentation für andere Entwickler (auch für zukünftiges ihr Selbst!).

Denkt daran, dass Props-Validierung zwar während der Entwicklung äußerst nützlich ist, aber in Produktionsbuilds aus Performancegründen entfernt wird. Verlasst euch also nicht darauf für Sicherheitsprüfungen!

Ich hoffe, dieser Leitfaden hat euch geholfen, die Props-Validierung in React zu verstehen. Übt weiter, kodiert weiter und vor allem: Habt Spaß! Wenn ihr euch jemals festgefahren følt, denkt daran: Selbst die komplexesten React-Anwendungen werden schrittweise, eine Prop nach der anderen, erstellt. Ihr schafft das!

Credits: Image by storyset