Reagieren Sie auf die Karte
Eine Karte ist ein Datenerfassungstyp, bei dem Daten in Form von Paaren gespeichert werden. Es enthält einen eindeutigen Schlüssel. Der in der Karte gespeicherte Wert muss dem Schlüssel zugeordnet werden. Wir können kein doppeltes Paar in der Map() speichern. Dies liegt an der Einzigartigkeit jedes gespeicherten Schlüssels. Es wird hauptsächlich zum schnellen Suchen und Nachschlagen von Daten verwendet.
In React ist die ?map? Methode zum Durchlaufen und Anzeigen einer Liste ähnlicher Objekte einer Komponente. Eine Karte ist nicht die Funktion von React. Stattdessen handelt es sich um die Standard-JavaScript-Funktion, die für jedes Array aufgerufen werden kann. Die Methode „map()“ erstellt ein neues Array, indem sie eine bereitgestellte Funktion für jedes Element im aufrufenden Array aufruft.
Beispiel
Im gegebenen Beispiel nimmt die Funktion map() ein Array von Zahlen und verdoppelt deren Werte. Wir weisen das von map() zurückgegebene neue Array der Variablen doubleValue zu und protokollieren es.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); In React wird die Methode map() verwendet für:
1. Durchlaufen des Listenelements.
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 ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = ['A', 'B', 'C', 'D', 'D']; ReactDOM.render( , document.getElementById('app') ); export default App; Ausgabe
2. Durchlaufen des Listenelements mit Schlüsseln.
Beispiel
import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('app') ); export default App; Ausgabe
