Как использовать метод карты в реакции

В реакции метод карты используется для перемещения и отображения списка похожих объектов компонента; метод карты не уникален и может вызывать стандартные функции JavaScript для любого массива. Метод карты вызывает предоставленную функцию для каждого элемента. вызывающий массив для создания массива.

Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.

Как использовать метод карты в реакции

Карта — это тип сбора данных, в котором данные хранятся в виде пар. Он содержит уникальный ключ, которому должны быть сопоставлены значения, хранящиеся в карте. Мы не можем хранить повторяющиеся пары в карте(), потому что каждый сохраненный ключ уникален и в основном используется для быстрого поиска и поиска данных.

В React метод карты используется для перебора и отображения списка похожих объектов в карте компонента. Он не является специфичным для React. Вместо этого это стандартная функция JavaScript, которую можно вызывать для любого массива. Метод map() создает новый массив, вызывая предоставленную функцию для каждого элемента вызывающего массива.

пример

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

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

В React метод map() используется для:

1. Перейдите по элементам списка.

пример

импортировать React из «реагировать»; импортировать ReactDOM из «реагировать-dom»; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li > ); return ( <div> <h2>Пример карты React</h2> <ul>{listItems</ul> </div> } const myLists = ['A', 'B', 'C' , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );

2. Перебрать элементы списка по ключу.

пример

импортировать React из «реагировать»; импортировать ReactDOM из «реагировать-dom»; function ListItem(props) { return <li>{props.value}</li> } function NumberList(props) { const Numbers = props.numbers; const listItems = Numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <div> <h2>Пример карты React</h2> <ul> {listItems} </ul> </div> ); } const Numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList Numbers={numbers} />, document.getElementById('app') ) );