Žemėlapis yra duomenų rinkimo tipas, kuriame duomenys saugomi porų pavidalu. Jame yra unikalus raktas. Žemėlapyje saugoma reikšmė turi būti susieta su raktu. Negalime išsaugoti pasikartojančios poros žemėlapyje (). Taip yra dėl kiekvieno saugomo rakto unikalumo. Jis daugiausia naudojamas greitai duomenų paieškai ir paieškai.
Programoje „React“ rodomas ?žemėlapis? metodas, naudojamas panašių komponento objektų sąrašui pereiti ir rodyti. Žemėlapis nėra „React“ funkcija. Vietoj to, tai yra standartinė JavaScript funkcija, kurią galima iškviesti bet kuriame masyve. Map() metodas sukuria naują masyvą, iškviesdamas pateiktą funkciją kiekviename iškviečiamo masyvo elemente.
Pavyzdys
Pateiktame pavyzdyje funkcija map() paima skaičių masyvą ir padvigubina jų reikšmes. Naują map() grąžintą masyvą priskiriame kintamajam doubleValue ir registruojame.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); Programoje „React“ naudojamas žemėlapio () metodas:
1. Sąrašo elemento perėjimas.
Pavyzdys
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; Išvestis
2. Sąrašo elemento judėjimas klavišais.
Pavyzdys
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; Išvestis
