logo

Reagálási térkép

A térkép egy adatgyűjtési típus, ahol az adatokat párok formájában tárolják. Egyedi kulcsot tartalmaz. A térképen tárolt értéket hozzá kell rendelni a kulcshoz. Nem tudunk duplikált párt tárolni a map()-ban. Ez az egyes tárolt kulcsok egyedisége miatt van. Főleg adatok gyors keresésére és keresésére használják.

A Reactban a ?térkép? egy komponens hasonló objektumainak listájának bejárására és megjelenítésére használt módszer. A térkép nem a React funkciója. Ehelyett ez a szabványos JavaScript függvény, amely bármely tömbön meghívható. A map() metódus új tömböt hoz létre úgy, hogy meghív egy megadott függvényt a hívó tömb minden elemére.

Példa

Az adott példában a map() függvény számokból álló tömböt vesz fel, és megduplázza az értékeket. A map() által visszaadott új tömböt a doubleValue változóhoz rendeljük, és naplózzuk.

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

A Reactban a map() metódus a következőkhöz használatos:

1. A listaelem bejárása.

bharti jha

Példa

 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; 

Kimenet

Reagálási térkép

2. A listaelem bejárása billentyűkkel.

mi az a klaszterezés

Példa

 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; 

Kimenet

Reagálási térkép