Un mapa és un tipus de recollida de dades on les dades s'emmagatzemen en forma de parells. Conté una clau única. El valor emmagatzemat al mapa s'ha d'assignar a la clau. No podem emmagatzemar un parell duplicat al map(). És a causa de la singularitat de cada clau emmagatzemada. S'utilitza principalment per a la cerca ràpida i la cerca de dades.
A React, el ?mapa? mètode utilitzat per recórrer i mostrar una llista d'objectes similars d'un component. Un mapa no és la característica de React. En canvi, és la funció JavaScript estàndard que es pot cridar a qualsevol matriu. El mètode map() crea una matriu nova cridant a una funció proporcionada a cada element de la matriu de crida.
Exemple
En l'exemple donat, la funció map() pren una matriu de nombres i duplica els seus valors. Assignem la nova matriu retornada per map() a la variable doubleValue i la registrem.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); A React, el mètode map() utilitzat per:
1. Travessant l'element de llista.
Exemple
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; Sortida
2. Travessant l'element de llista amb tecles.
Exemple
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; Sortida
