Mapa to typ gromadzenia danych, w którym dane są przechowywane w postaci par. Zawiera unikalny klucz. Wartość przechowywana na mapie musi zostać zmapowana na klucz. Nie możemy przechowywać zduplikowanej pary w map(). Dzieje się tak ze względu na niepowtarzalność każdego przechowywanego klucza. Stosowany jest głównie do szybkiego wyszukiwania i przeglądania danych.
W React, ?mapa? metoda używana do przeglądania i wyświetlania listy podobnych obiektów komponentu. Mapa nie jest funkcją React. Zamiast tego jest to standardowa funkcja JavaScript, którą można wywołać w dowolnej tablicy. Metoda map() tworzy nową tablicę, wywołując udostępnioną funkcję na każdym elemencie wywołującej tablicy.
Przykład
W podanym przykładzie funkcja map() pobiera tablicę liczb i podwaja ich wartości. Przypisujemy nową tablicę zwróconą przez map() do zmiennej doubleValue i logujemy ją.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); W React metoda map() używana do:
1. Przechodzenie przez element listy.
Przykład
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; Wyjście
2. Przechodzenie przez element listy za pomocą klawiszy.
pobierz film z youtube vlc
Przykład
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; Wyjście
