Kartta on tiedonkeruutyyppi, johon tiedot tallennetaan parien muodossa. Se sisältää ainutlaatuisen avaimen. Karttaan tallennettu arvo on yhdistettävä avaimeen. Emme voi tallentaa päällekkäistä paria map(). Se johtuu kunkin tallennetun avaimen ainutlaatuisuudesta. Sitä käytetään pääasiassa nopeaan tiedonhakuun ja etsimiseen.
Reactissa ?kartta? menetelmä, jota käytetään kulkemaan ja näyttämään luettelo komponentin samanlaisista objekteista. Kartta ei ole Reactin ominaisuus. Sen sijaan se on tavallinen JavaScript-toiminto, jota voidaan kutsua missä tahansa taulukossa. Map()-menetelmä luo uuden taulukon kutsumalla tarjotun funktion jokaisessa kutsuvan taulukon elementissä.
Esimerkki
Annetussa esimerkissä map()-funktio ottaa joukon numeroita ja tuplaa niiden arvot. Määritämme map():n palauttaman uuden taulukon muuttujalle doubleValue ja kirjaamme sen.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); Reactissa map()-menetelmää käytetään:
1. Listaelementin läpikulku.
Esimerkki
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; Lähtö
2. Listaelementin läpikulku näppäimillä.
Esimerkki
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; Lähtö
