ReactJS - Geschachtelte Komponenten: Ein Anfängerleitfaden

Hallo da draußen, zukünftige React-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der geschachtelten Komponenten in ReactJS. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein und alles Schritt für Schritt erklären. Am Ende dieses Tutorials werden Sie Komponenten wie ein Profi verschachteln können!

Was sind Geschachtelte Komponenten?

Bevor wir tiefer einsteigen, lassen Sie uns verstehen, was geschachtelte Komponenten sind. Stellen Sie sich vor, Sie bauen ein Haus (Ihre React-App). Die Wände, das Dach und das Fundament sind Ihre Hauptkomponenten. Aber innen im Haus haben Sie Räume (geschachtelte Komponenten), die Möbel (weitere geschachtelte Komponenten) enthalten können. Diese Struktur ermöglicht es uns, komplexe Benutzeroberflächen auf eine handhabbare Weise zu erstellen.

Warum Geschachtelte Komponenten verwenden?

1. Wiederverwendbarkeit: Erstellen Sie Komponenten einmal und verwenden Sie sie mehrmals.
2. Wartbarkeit: Einfacher zu aktualisieren und zu verwalten, wenn sie kleiner und fokussierter sind.
3. Lesbarkeit: Ihr Code wird organisierter und einfacher zu verstehen.

Nun, lassen Sie uns mit ein bisschen Code an die Arbeit gehen!

Unser Erster Geschachtelter Komponente Erstellen

Wir beginnen mit einem einfachen Beispiel. Stellen Sie sich vor, wir bauen eine Einkaufs-App. Wir erstellen eine Product-Komponente, die eine Price-Komponente enthält.

// Product.js
import React from 'react';
import Price from './Price';

function Product({ name, price }) {
return (
<div className="product">
<h2>{name}</h2>
<Price amount={price} />
</div>
);
}

export default Product;

// Price.js
import React from 'react';

function Price({ amount }) {
return <p className="price">${amount.toFixed(2)}</p>;
}

export default Price;

In diesem Beispiel ist Product unsere Elternteilkomponente, und Price ist darin verschachtelt. Lassen Sie uns das durcharbeiten:

1. Wir importieren die Price-Komponente in Product.
2. Die Product-Komponente erhält name und price als Props.
3. Wir verwenden die Price-Komponente innerhalb von Product, übergeben die price-Prop als amount.

Wenn wir nun die Product-Komponente verwenden:

<Product name="Super Cool Gadget" price={19.99} />

Wird folgendes gerendert:

<div class="product">
<h2>Super Cool Gadget</h2>
<p class="price">$19.99</p>
</div>

Ist das nicht toll? Wir haben eine wiederverwendbare Preisanzeige erstellt, die wir in jedem Produkt verwenden können!

FormattedMoney Komponente

Nun erstellen wir eine fortgeschrittene geschachtelte Komponente zur Formatierung von Geldbeträgen. Dies wird nützlich sein, um Preise in verschiedenen Währungen anzuzeigen.

// FormattedMoney.js
import React from 'react';

function FormattedMoney({ amount, currency = 'USD' }) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
});

return <span className="formatted-money">{formatter.format(amount)}</span>;
}

export default FormattedMoney;

// Product.js (aktualisiert)
import React from 'react';
import FormattedMoney from './FormattedMoney';

function Product({ name, price, currency }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
</div>
);
}

export default Product;

Lassen Sie uns das in FormattedMoney durcharbeiten:

1. Wir verwenden die Intl.NumberFormat API, um unsere Zahl als Währung zu formatieren.
2. Wir setzen eine Standardwährung von 'USD' mit Standardwertparametern.
3. Die Komponente gibt ein span mit dem formatierten Betrag zurück.

Nun können wir unsere Product-Komponente wie folgt verwenden:

<Product name="Amazing Widget" price={29.99} currency="EUR" />

Dies wird gerendert als:

<div class="product">
<h2>Amazing Widget</h2>
<span class="formatted-money">€29.99</span>
</div>

Cool, oder? Wir haben eine flexible, wiederverwendbare Komponente für die Anzeige von Preisen in verschiedenen Währungen erstellt!

FormattedDate Komponente

Lassen Sie uns eine weitere geschachtelte Komponente erstellen, um formatierte Daten anzuzeigen. Dies könnte nützlich sein, um Produktveröffentlichungsdaten oder Enddaten von Verkaufsaktionen anzuzeigen.

// FormattedDate.js
import React from 'react';

function FormattedDate({ date, format = 'long' }) {
const options = {
short: { month: 'short', day: 'numeric', year: 'numeric' },
long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
};

const formatter = new Intl.DateTimeFormat('en-US', options[format]);

return <span className="formatted-date">{formatter.format(new Date(date))}</span>;
}

export default FormattedDate;

// Product.js (nochmals aktualisiert)
import React from 'react';
import FormattedMoney from './FormattedMoney';
import FormattedDate from './FormattedDate';

function Product({ name, price, currency, releaseDate }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
<p>Veröffentlichungsdatum: <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

In dieser FormattedDate-Komponente:

1. Wir erstellen zwei Formatoptionen: 'kurz' und 'lang'.
2. Wir verwenden Intl.DateTimeFormat, um das Datum basierend auf der gewählten Formatoption zu formatieren.
3. Wir parsen die Eingangsdatumszeichenkette in ein Datumobjekt.

Nun können wir unsere aktualisierte Product-Komponente wie folgt verwenden:

<Product
name="Futuristic Gizmo"
price={99.99}
currency="USD"
releaseDate="2023-12-25"
/>

Dies wird gerendert als:

<div class="product">
<h2>Futuristic Gizmo</h2>
<span class="formatted-money">$99.99</span>
<p>Veröffentlichungsdatum: <span class="formatted-date">Montag, Dezember 25, 2023</span></p>
</div>

Schön, oder? Wir haben eine flexible, wiederverwendbare Komponente für die Anzeige von Preisen in verschiedenen Währungen und formatierten Daten erstellt!

Alles Zusammenfügen

Lassen Sie uns eine ProductList-Komponente erstellen, die alle unsere geschachtelten Komponenten verwendet:

// ProductList.js
import React from 'react';
import Product from './Product';

function ProductList({ products }) {
return (
<div className="product-list">
{products.map(product => (
<Product
key={product.id}
name={product.name}
price={product.price}
currency={product.currency}
releaseDate={product.releaseDate}
/>
))}
</div>
);
}

export default ProductList;

Nun können wir unsere ProductList wie folgt verwenden:

const products = [
{ id: 1, name: "Super Gadget", price: 49.99, currency: "USD", releaseDate: "2023-06-15" },
{ id: 2, name: "Mega Widget", price: 39.99, currency: "EUR", releaseDate: "2023-07-01" },
{ id: 3, name: "Awesome Gizmo", price: 59.99, currency: "GBP", releaseDate: "2023-08-30" },
];

<ProductList products={products} />

Dies wird eine Liste von Produkten rendern,每件产品都带有格式化的价格和日期！

Fazit

Glückwunsch! Sie haben gerade über geschachtelte Komponenten in React gelernt. Wir haben wiederverwendbare Komponenten für die Formatierung von Geldbeträgen und Daten erstellt und sie in einer Produktkomponente verschachtelt. Das ist erst der Anfang – die Möglichkeiten mit geschachtelten Komponenten sind endlos!

Denken Sie daran, Übung macht den Meister. Versuchen Sie, Ihre eigenen geschachtelten Komponenten zu erstellen und zu sehen, wie sie Ihre React-Apps modularer und wartbarer machen können.

Frohes Coden, zukünftige React-Meister! ?

Komponente	Zweck	Props
FormattedMoney	Anzeige von formatierten Währungen	amount, currency
FormattedDate	Anzeige von formatierten Daten	date, format
Product	Anzeige von Produktinformationen	name, price, currency, releaseDate
ProductList	Anzeige einer Liste von Produkten	products (Array)

Credits: Image by storyset