Een kaart is een type gegevensverzameling waarbij gegevens in de vorm van paren worden opgeslagen. Het bevat een unieke sleutel. De waarde die op de kaart is opgeslagen, moet aan de sleutel worden toegewezen. We kunnen geen duplicaatpaar opslaan in de map(). Dit komt door het unieke karakter van elke opgeslagen sleutel. Het wordt vooral gebruikt voor het snel zoeken en opzoeken van gegevens.
In React wordt de ?kaart? methode die wordt gebruikt om een lijst met vergelijkbare objecten van een component te doorlopen en weer te geven. Een kaart is niet de functie van React. In plaats daarvan is het de standaard JavaScript-functie die op elke array kan worden aangeroepen. De map()-methode maakt een nieuwe array door een opgegeven functie aan te roepen voor elk element in de aanroepende array.
Voorbeeld
In het gegeven voorbeeld neemt de functie map() een array van getallen en verdubbelt hun waarden. We wijzen de nieuwe array die door map() wordt geretourneerd toe aan de variabele doubleValue en loggen deze.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); In React wordt de map()-methode gebruikt voor:
1. Het lijstelement doorlopen.
Voorbeeld
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; Uitvoer
2. Door het lijstelement bladeren met toetsen.
Voorbeeld
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; Uitvoer
