logo

React Map

Картата е тип събиране на данни, където данните се съхраняват под формата на двойки. Съдържа уникален ключ. Стойността, съхранена в картата, трябва да бъде съпоставена с ключа. Не можем да съхраним дублираща се двойка в map(). Това се дължи на уникалността на всеки съхранен ключ. Използва се главно за бързо търсене и търсене на данни.

В React, ?map? метод, използван за преминаване и показване на списък от подобни обекти на компонент. Картата не е функцията на React. Вместо това, това е стандартната JavaScript функция, която може да бъде извикана във всеки масив. Методът map() създава нов масив чрез извикване на предоставена функция на всеки елемент в извикващия масив.

Пример

В дадения пример функцията map() взема масив от числа и удвоява техните стойности. Присвояваме новия масив, върнат от map() на променливата doubleValue и го регистрираме.

форматиране на java низове
 var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); 

В React методът map(), използван за:

1. Обхождане на елемента от списъка.

Пример

 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; 

Изход

речник за сортиране на python
React Map

2. Обхождане на елемента от списъка с клавиши.

Пример

 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; 

Изход

React Map