In React wird die Map-Methode zum Durchlaufen und Anzeigen einer Liste ähnlicher Objekte der Komponente verwendet. Die Map-Methode ist nicht für die Reaktion bestimmt und kann Standard-JavaScript-Funktionen für jedes Array aufrufen. Die Map-Methode ruft die bereitgestellte Funktion für jedes Element auf das aufrufende Array, um ein Array zu erstellen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Karte ist ein Datenerfassungstyp, bei dem Daten in Form von Paaren gespeichert werden. Es enthält einen eindeutigen Schlüssel, dem die in der Karte gespeicherten Werte zugeordnet werden müssen. Wir können in map() keine doppelten Paare speichern, da jeder gespeicherte Schlüssel einzigartig ist und hauptsächlich zum schnellen Suchen und Finden von Daten verwendet wird.
In React wird die Map-Methode zum Iterieren und Anzeigen einer Liste ähnlicher Objekte in einer Komponente verwendet. Die Map ist nicht spezifisch für React, sondern eine Standard-JavaScript-Funktion, die für jedes Array aufgerufen werden kann. Die Methode „map()“ erstellt ein neues Array, indem sie die bereitgestellte Funktion für jedes Element im aufrufenden Array aufruft.
Beispiel
Im gegebenen Beispiel akzeptiert die Funktion „map()“ ein Array von Zahlen und verdoppelt seinen Wert. Wir weisen das von „map()“ zurückgegebene neue Array der Variablen „doubleValue“ zu und zeichnen es auf.
var zahlen = [1, 2, 3, 4, 5]; const doubleValue = zahlen.map((zahl)=>{ return (zahl * 2); });In React wird die Methode map() verwendet für:
1. Durchlaufen Sie die Listenelemente.
Beispiel
import React from 'react'; import ReactDOM from 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li > ); return ( <div> <h2>React Map example</h2> <ul>{listItems}</ul> </div> } const myLists = ['A', 'B', 'C'); , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );2. Durchlaufen Sie die Listenelemente nach Schlüssel.
Beispiel
import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { return <li>{props.value}</li>; const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <div> <h2>React Map-Beispiel</h2> <ul> {listItems} </ul> </div> ); } const zahlen = [1, 2, 3, 4, 5]; ) );