logo

React Map

Zemljevid je vrsta zbirke podatkov, kjer so podatki shranjeni v obliki parov. Vsebuje edinstven ključ. Vrednost, shranjena v preslikavi, mora biti preslikana v ključ. Podvojenega para ne moremo shraniti v mapo(). To je zaradi edinstvenosti vsakega shranjenega ključa. Uporablja se predvsem za hitro iskanje in iskanje podatkov.

V Reactu je ?map? metoda, ki se uporablja za prečkanje in prikaz seznama podobnih predmetov komponente. Zemljevid ni funkcija Reacta. Namesto tega je standardna funkcija JavaScript, ki jo je mogoče poklicati v kateri koli matriki. Metoda map() ustvari novo matriko s klicem navedene funkcije za vsak element v klicni matriki.

Primer

V danem primeru funkcija map() vzame niz števil in podvoji njihove vrednosti. Novo matriko, ki jo vrne map(), dodelimo spremenljivki doubleValue in jo zabeležimo.

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

V Reactu se metoda map() uporablja za:

1. Prehod po elementu seznama.

Primer

 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; 

Izhod

React Map

2. Premikanje po elementu seznama s tipkami.

Primer

 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; 

Izhod

React Map