ReactJS - Eigenschaften (props): Ein Anfängerleitfaden

Hallo, zukünftige React-Entwickler! Heute tauchen wir in eines der wichtigsten Konzepte in React ein: Eigenschaften, oder wie wir sie liebevoll nennen, "props". Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie Schritt für Schritt führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Lassen Sie uns gemeinsam diese aufregende Reise antreten!

Was sind Props?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was Props sind. Stellen Sie sich vor, Sie bauen ein Haus (unsere React-Anwendung). Props sind wie die Baupläne, die jedem Raum (Komponente) sagen, wie er aussehen und was er enthalten sollte. Sie sind eine Möglichkeit, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben.

Verwendung von Props

Lassen Sie uns mit einem einfachen Beispiel beginnen. Wir erstellen eine Greeting-Komponente, die eine personalisierte Nachricht anzeigt.

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

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

In diesem Beispiel übergeben wir die name-Prop an die Greeting-Komponente. Lassen Sie uns das genauer anschauen:

1. Wir definieren eine Greeting-Komponente, die ein props-Objekt erwartet.
2. Innerhalb von Greeting verwenden wir props.name, um auf die name-Prop zuzugreifen.
3. In unserer App-Komponente verwenden wir Greeting zweimal und übergeben unterschiedliche name-Props.

Wenn Sie diesen Code ausführen, werden Sie zwei Grüße sehen: "Hallo, Alice!" und "Hallo, Bob!".

Übergeben von mehreren Props

Props sind nicht aufstrings beschränkt. Lassen Sie uns unsere Greeting-Komponente erweitern, um mehr Informationen zu enthalten:

function Greeting(props) {
return (
<div>
<h1>Hallo, {props.name}!</h1>
<p>Alter: {props.age}</p>
<p>Lieblingsfarbe: {props.color}</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={28} color="blau" />
<Greeting name="Bob" age={32} color="grün" />
</div>
);
}

Jetzt übergeben wir drei Props: name, age und color. Beachten Sie, wie wir für die age-Prop Klammern {} verwenden? Das liegt daran, dass wir eine Zahl, nicht einen String, übergeben.

Standard Props

Manchmal möchte man einen Standardwert für eine Prop haben, falls diese nicht bereitgestellt wird. Hier kommen Standard Props ins Spiel. Lassen Sie uns unsere Greeting-Komponente ändern, um ein Standardalter zu haben:

function Greeting(props) {
return (
<div>
<h1>Hallo, {props.name}!</h1>
<p>Alter: {props.age}</p>
</div>
);
}

Greeting.defaultProps = {
age: 25
};

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

In diesem Beispiel wird, wenn wir keine age-Prop bereitstellen (wie bei Bob), der Standardwert 25 verwendet.

Props vs. State

Nun, da wir Props verstehen, vergleichen wir sie mit einem anderen wichtigen React-Konzept: State. Hier ist eine schnelle Gegenüberstellung:

Props	State
Vom Parent an das Child übergeben	Innerhalb der Komponente verwaltet
Nur lesbar	Kann geändert werden
Hilft Komponenten zu kommunizieren	Lässt Komponenten dynamisch sein

Lassen Sie uns dies in die Tat umsetzen mit einer einfachen Zählerkomponente:

import React, { useState } from 'react';

function Counter(props) {
const [count, setCount] = useState(props.initialCount);

return (
<div>
<p,Zähler: {count}</p>
<button onClick={() => setCount(count + 1)}>Erhöhen</button>
</div>
);
}

function App() {
return (
<div>
<Counter initialCount={0} />
<Counter initialCount={10} />
</div>
);
}

In diesem Beispiel:

• initialCount ist eine Prop. Sie wird von App an Counter übergeben und ändert sich nicht.
• count ist State. Er wird mit dem Wert von initialCount initialisiert, kann aber von der setCount-Funktion geändert werden.

Schlussfolgerung

Props sind ein grundlegender Bestandteil von React, der es Ihnen ermöglicht, flexible, wiederverwendbare Komponenten zu erstellen. Sie sind wie die geheimen Zutaten, die Ihre React-Rezepte einzigartig und köstlich machen!

Denken Sie daran:

1. Props fließen von Parent zu Child.
2. Sie sind nur lesbar – versuchen Sie nicht, Props direkt zu ändern!
3. Verwenden Sie Standard Props für Ausweichwerte.
4. Props sind zum Übertragen von Daten da, State zum Verwalten von Daten.

Während Sie Ihre React-Reise fortsetzen, werden Sie Props in immer komplexeren und interessanten Weisen einsetzen. Aber keine Sorge – mit Übung wird es zur zweiten Natur. Genau wie das Fahrradfahren, wenn man es einmal gelernt hat, vergisst man es nie!

Weiterschreiben, weiterlernen und vor allem: Spaß haben! React ist eine großartige Bibliothek, und ich bin gespannt darauf, dass Sie all ihre Möglichkeiten entdecken werden. Bis下次, fröhliches Reacten!

Credits: Image by storyset