En karta är en datainsamlingstyp där data lagras i form av par. Den innehåller en unik nyckel. Värdet som lagras i kartan måste mappas till nyckeln. Vi kan inte lagra ett dubblettpar i map(). Det är på grund av det unika hos varje lagrad nyckel. Den används främst för snabb sökning och uppslagning av data.
I React, ?kartan? metod som används för att gå igenom och visa en lista med liknande objekt i en komponent. En karta är inte funktionen hos React. Istället är det standard JavaScript-funktionen som kan anropas på vilken array som helst. Metoden map() skapar en ny array genom att anropa en tillhandahållen funktion på varje element i den anropande arrayen.
Exempel
I det givna exemplet tar funktionen map() en array av tal och dubblar deras värden. Vi tilldelar den nya arrayen som returneras av map() till variabeln doubleValue och loggar den.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); I React, metoden map() som används för:
1. Gå igenom listelementet.
Exempel
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; Produktion
2. Genomföra listelementet med nycklar.
Exempel
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; Produktion
