ReactJS - Map: Ein Anfängerleitfaden zur Transformation von Arrays

Hallo da draußen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt von ReactJS, specifically focusing on the powerful map function. Als Ihr freundlicher Nachbarschafts-Informatiklehrer bin ich hier, um Sie durch dieses Konzept mit klaren Erklärungen, vielen Beispielen und vielleicht sogar ein paar Lacher auf dem Weg zu führen. Also holen Sie sich Ihr lieblingsGetränk, machen Sie es sich gemütlich und tauchen wir ein!

Was ist Map in ReactJS?

Bevor wir uns der React-spezifischen Nutzung von map zuwenden, lassen Sie uns mit den Grundlagen beginnen. In JavaScript (auf dem React basiert), ist map eine Array-Methode, die es uns ermöglicht, jedes Element eines Arrays gemäß einer gegebenen Funktion zu transformieren. Es ist wie eine magische Zauberstab, der jedes Element in Ihrer Liste in etwas Neues verwandeln kann!

Die Syntax

Hier ist die allgemeine Syntax der map-Funktion:

array.map((currentValue, index, array) => {
// Return the transformed element
});

Machen Sie sich keine Sorgen, wenn dies initially etwas einschüchternd aussieht. Wir werden es Schritt für Schritt durchgehen, und bald werden Sie wie ein Profi映射!

Warum Map in React verwenden?

In React müssen wir oft Listen von Elementen rendern, wie z.B. eine Liste von Todo-Elementen, eine Galerie von Bildern oder eine Tabelle mit Daten. Hier kommt map zum Einsatz! Es ermöglicht uns, effizient ein Array von Daten in ein Array von JSX-Elementen zu transformieren, die React rendern kann.

Dein erstes Map in React

Lassen Sie uns mit einem einfachen Beispiel beginnen. Stellen wir uns vor, wir haben ein Array von Fruchtnamen und wir möchten sie als Liste in unserer React-Komponente anzeigen.

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

return (
<div>
<h2>Meine Fruchtliste</h2>
<ul>
{fruits.map((fruit) => (
<li>{fruit}</li>
))}
</ul>
</div>
);
}

export default FruitList;

Lassen Sie uns das aufschlüsseln:

1. Wir haben ein Array von Fruchtnamen, das in der Variablen fruits gespeichert ist.
2. Innen in unserer JSX verwenden wir geschweifte Klammern {} um JavaScript-Ausdrücke einzubetten.
3. Wir rufen fruits.map() auf, was über jedes Element im Array iterieren wird.
4. Für jede Frucht geben wir ein <li>-Element zurück, das den Fruchtname enthält.

Wenn React diese Komponente rendert, werden Sie eine schön formatierte Liste von Früchten auf Ihrer Seite sehen. Magie, nicht wahr?

Hinzufügen von Keys zu Listenpunkten

Wenn Sie das vorherige Beispiel ausprobiert haben, haben Sie möglicherweise eine Warnung in Ihrer Konsole über Keys bemerkt. Keys sind spezielle Attribute, die React dabei helfen, zu erkennen, welche Elemente in einer Liste geändert, hinzugefügt oder entfernt wurden. Lassen Sie uns unser Beispiel aktualisieren, um Keys hinzuzufügen:

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

return (
<div>
<h2>Meine Fruchtliste</h2>
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
</div>
);
}

export default FruitList;

In dieser aktualisierten Version verwenden wir den index jeder Frucht als Key. Obwohl die Verwendung des Index als Key im Allgemeinen nicht empfohlen wird, ist es für statische Listen wie diese in Ordnung.

Mapping über Objekte

Oftentimes arbeiten Sie mit Arrays von Objekten anstelle von einfachen Zeichenfolgen. Sehen wir uns an, wie wir das handhaben können:

import React from 'react';

function FruitList() {
const fruits = [
{ id: 1, name: 'Apple', color: 'Red' },
{ id: 2, name: 'Banana', color: 'Yellow' },
{ id: 3, name: 'Cherry', color: 'Red' },
{ id: 4, name: 'Date', color: 'Brown' },
];

return (
<div>
<h2>Meine Fruchtliste</h2>
<ul>
{fruits.map((fruit) => (
<li key={fruit.id}>
{fruit.name} - {fruit.color}
</li>
))}
</ul>
</div>
);
}

export default FruitList;

In diesem Beispiel mappingen wir über ein Array von Frucht-Objekten. Jedes Objekt hat eine id, name und color. Wir verwenden die id als Key (was eine viel bessere Praxis ist als den Index zu verwenden) und zeigen sowohl den Namen als auch die Farbe jeder Frucht an.

Verwendung von Map, um benutzerdefinierte Komponenten zu erstellen

Wenn Ihre React-Fähigkeiten wachsen, werden Sie oft benutzerdefinierte Komponenten für Listenpunkte erstellen. Sehen wir uns an, wie wir map mit einer benutzerdefinierten FruitItem-Komponente verwenden können:

import React from 'react';

function FruitItem({ name, color }) {
return (
<li style={{ color: color }}>
{name}
</li>
);
}

function FruitList() {
const fruits = [
{ id: 1, name: 'Apple', color: 'red' },
{ id: 2, name: 'Banana', color: 'yellow' },
{ id: 3, name: 'Cherry', color: 'red' },
{ id: 4, name: 'Date', color: 'brown' },
];

return (
<div>
<h2>Meine farbenfrohe Fruchtliste</h2>
<ul>
{fruits.map((fruit) => (
<FruitItem
key={fruit.id}
name={fruit.name}
color={fruit.color}
/>
))}
</ul>
</div>
);
}

export default FruitList;

In diesem Beispiel haben wir eine FruitItem-Komponente erstellt, die name und color als Props empfängt. Wir verwenden map, um ein FruitItem für jede Frucht in unserem Array zu erstellen. Dieser Ansatz macht unseren Code modularer und einfacher zu warten.

Fortgeschrittene Map-Techniken

Filtern während desMappings

Manchmal möchten Sie Ihre Liste beim Mappen filtern. Dies können Sie durch Kombination von map und filter erreichen:

import React from 'react';

function RedFruitList() {
const fruits = [
{ id: 1, name: 'Apple', color: 'red' },
{ id: 2, name: 'Banana', color: 'yellow' },
{ id: 3, name: 'Cherry', color: 'red' },
{ id: 4, name: 'Date', color: 'brown' },
];

return (
<div>
<h2>Meine rote Fruchtliste</h2>
<ul>
{fruits
.filter(fruit => fruit.color === 'red')
.map(fruit => (
<li key={fruit.id}>{fruit.name}</li>
))
}
</ul>
</div>
);
}

export default RedFruitList;

Dieses Beispiel filtert die Früchte, um nur rote Früchte zu include, und mapped dann über die gefilterte Liste, um Listenpunkte zu erstellen.

Geschachteltes Mapping

Manchmal müssen Sie mit geschachtelten Arrays arbeiten. Sehen wir uns ein Beispiel an:

import React from 'react';

function FruitCategories() {
const fruitCategories = [
{ category: 'Citrus', fruits: ['Orange', 'Lemon', 'Lime'] },
{ category: 'Berries', fruits: ['Strawberry', 'Blueberry', 'Raspberry'] },
{ category: 'Tropical', fruits: ['Mango', 'Pineapple', 'Coconut'] },
];

return (
<div>
<h2>Frucht-Kategorien</h2>
{fruitCategories.map((category, index) => (
<div key={index}>
<h3>{category.category}</h3>
<ul>
{category.fruits.map((fruit, fruitIndex) => (
<li key={fruitIndex}>{fruit}</li>
))}
</ul>
</div>
))}
</div>
);
}

export default FruitCategories;

In diesem Beispiel mappingen wir über das fruitCategories-Array und für jede Kategorie mappingen wir über ihre fruits-Array. Dies erstellt eine geschachtelte Listenstruktur.

Häufig verwendete Map-Methoden in React

Hier ist eine Tabelle, die einige häufig verwendete Map-Methoden zusammenfasst, die Sie in React verwenden könnten:

Methode	Beschreibung	Beispiel
map	Transformiert jedes Element eines Arrays	array.map(item => <li>{item}</li>)
filter	Erstellt ein neues Array mit Elementen, die einen Test bestehen	array.filter(item => item.length > 3)
reduce	Reduziert ein Array auf einen einzigen Wert	array.reduce((acc, item) => acc + item, 0)
forEach	Führt eine Funktion für jedes Array-Element aus	array.forEach(item => console.log(item))
find	Gibt das erste Element zurück, das einen Test besteht	array.find(item => item.id === 3)
some	Prüft, ob einige Elemente einen Test bestehen	array.some(item => item > 10)
every	Prüft, ob alle Elemente einen Test bestehen	array.every(item => item.length > 0)

Denken Sie daran, dass map zwar unglaublich nützlich ist, diese anderen Methoden können ebenfalls leistungsstarke Werkzeuge in Ihrem React-Werkzeugkasten sein!

Schlussfolgerung

Und da haben Sie es, Leute! Wir haben die map-Funktion in React von den Grundlagen bis zu den fortgeschrittenen Techniken durchquert. Erinnern Sie sich daran, map ist wie Ihr zuverlässiger Schweizer Army Knife in der React-Entwicklung – es ist vielseitig, leistungsstark und Sie werden es öfter erreichen.

Als Sie Ihre React-Abenteuer fortsetzen, üben Sie weiter mit map. Versuchen Sie, verschiedene Arten von Listen zu erstellen, experimentieren Sie mit komplexeren Datenstrukturen und sehen Sie, wie Sie map mit anderen Array-Methoden kombinieren können, um dynamische und interaktive Benutzeroberflächen zu erstellen.

Frohes Coden und möge Ihre Arrays immer wahr sein!

Credits: Image by storyset