Карта – це тип колекції даних, де дані зберігаються у формі пар. Він містить унікальний ключ. Значення, що зберігається в карті, має бути зіставлено з ключем. Ми не можемо зберегти повторювану пару в map(). Це пов’язано з унікальністю кожного збереженого ключа. В основному використовується для швидкого пошуку та пошуку даних.
У React ?map? метод, який використовується для перегляду та відображення списку подібних об’єктів компонента. Карта не є функцією React. Натомість це стандартна функція JavaScript, яку можна викликати для будь-якого масиву. Метод map() створює новий масив, викликаючи надану функцію для кожного елемента масиву, що викликає.
приклад
У наведеному прикладі функція map() приймає масив чисел і подвоює їх значення. Ми призначаємо новий масив, повернутий map(), змінній doubleValue і реєструємо його.
довжина рядка bash
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); У React метод map() використовується для:
1. Обхід елемента списку.
приклад
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; Вихід
загальність у java
2. Перехід по елементу списку за допомогою клавіш.
приклад
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; Вихід
