Karte ir datu vākšanas veids, kurā dati tiek glabāti pāru veidā. Tajā ir unikāla atslēga. Kartē saglabātā vērtība ir jāsamēro ar atslēgu. Mēs nevaram saglabāt dublikātu pāri kartē (). Tas ir saistīts ar katras saglabātās atslēgas unikalitāti. To galvenokārt izmanto ātrai datu meklēšanai un meklēšanai.
Programmā React ?karte? metode, ko izmanto, lai šķērsotu un parādītu komponenta līdzīgu objektu sarakstu. Karte nav React funkcija. Tā vietā tā ir standarta JavaScript funkcija, kuru var izsaukt jebkurā masīvā. Metode map() izveido jaunu masīvu, izsaucot nodrošināto funkciju katrā izsaucošā masīva elementā.
Piemērs
Dotajā piemērā funkcija map() ņem skaitļu masīvu un dubulto to vērtības. Mēs piešķiram jauno masīvu, ko atgriež map(), mainīgajam doubleValue un reģistrējam to.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); Programmā React tiek izmantota kartes() metode:
1. Saraksta elementa šķērsošana.
Piemērs
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; Izvade
2. Saraksta elementa šķērsošana ar taustiņiem.
Piemērs
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; Izvade
