logo

Harta de reacție

O hartă este un tip de colectare de date în care datele sunt stocate sub formă de perechi. Conține o cheie unică. Valoarea stocată în hartă trebuie mapată la cheie. Nu putem stoca o pereche duplicată în map(). Este din cauza unicității fiecărei chei stocate. Este folosit în principal pentru căutarea rapidă și căutarea datelor.

În React, ?harta? metodă utilizată pentru a parcurge și afișa o listă de obiecte similare ale unei componente. O hartă nu este caracteristica React. În schimb, este funcția JavaScript standard care ar putea fi apelată pe orice matrice. Metoda map() creează o nouă matrice apelând o funcție furnizată pe fiecare element din matricea de apelare.

Exemplu

În exemplul dat, funcția map() preia o matrice de numere și le dublează valorile. Atribuim noua matrice returnată de map() variabilei doubleValue și o înregistrăm.

 var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); 

În React, metoda map() utilizată pentru:

1. Parcurgerea elementului de listă.

Exemplu

 import React from &apos;react&apos;; import ReactDOM from &apos;react-dom&apos;; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) =&gt; <li>{myList}</li> ); return ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = [&apos;A&apos;, &apos;B&apos;, &apos;C&apos;, &apos;D&apos;, &apos;D&apos;]; ReactDOM.render( , document.getElementById(&apos;app&apos;) ); export default App; 

Ieșire

a b c numere
Harta de reacție

2. Parcurgerea elementului de listă cu taste.

Exemplu

 import React from &apos;react&apos;; import ReactDOM from &apos;react-dom&apos;; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) =&gt; ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById(&apos;app&apos;) ); export default App; 

Ieșire

Harta de reacție