Хотели бы вы почувствовать себя колдуном? Сегодня я научу вас одному из моих любимых заклинаний в репертуаре React: динамическому рендерингу HTML с использованием .map()
.
Для этого упражнения давайте начнем с формулировки проблемы, которую нам нужно решить. Это классический вариант, и я уверен, что вы сталкивались с ним не раз: у нас есть массив данных о французской выпечке, и нам нужно аккуратно отобразить каждую выпечку вместе с соответствующими данными в DOM.
Допустим, мы сделали запрос API к причудливому маленькому серверу в Париже, и сервер отправил этот массив обратно в качестве ответа:
Tres bien, у нас есть список из трех кондитерских изделий. Каждый из них имеет свойство имени, свойство описания и свойство imgUrl. Давайте превратим эти данные во что-то приятное для просмотра!
В этом упражнении мы сохраним массив в состоянии нашего компонента — таким образом, его можно будет легко обновить, если мы сделаем еще один запрос к API, а у Пэрис есть еще несколько кондитерских изделий для рендеринга.
Чтобы компонент React имел состояние, он должен быть компонентом class
. Объект состояния в компоненте класса — это место, где мы храним данные, которые могут измениться и потребовать динамического повторного рендеринга. Вот как мог бы выглядеть наш образец данных выпечки, если бы он был сохранен в состоянии нашего компонента:
Великолепный. Мы настроили наш объект состояния, и его свойство «выпечка» содержит наш массив данных о выпечке. Теперь мы можем ссылаться на эти данные в остальной части нашего компонента!
Давайте напишем JSX для отображения этих данных на веб-странице. Здесь все становится волшебным… введите функции высшего порядка!
В JavaScript встроен ряд мощных функций для работы с массивами — некоторые из них включают .filter()
, .forEach()
и .map()
.
Эти функции относятся к особой разновидности, называемой функциями высшего порядка, поскольку они принимают функции в качестве своих аргументов. Каждая из этих функций заслуживает отдельного поста в блоге, но сегодня мы будем использовать .map()
.
.map()
будет перебирать массив, выполнять определенную пользователем функцию для каждого элемента в этом массиве и возвращать новый массив, состоящий из вывода этой функции для каждого элемента. Например, рассмотрим эту функцию карты:
[1, 2, 3].map((element) => { return element * 2; })
Это вернет «карту» первого массива, где каждое значение было умножено на 2: [2, 4, 6]
.
Итак, теперь, когда мы понимаем, как работает .map()
, как мы можем использовать его для рендеринга наших данных выпечки? Напомним, что у нас есть массив объектов. Рассмотрим функцию отображения в строках 33–42, написанную внутри метода render()
нашего компонента:
Этот код отображает это в DOM:
Давайте рассмотрим, что происходит в функции .map()
. Вот еще раз для справки:
- В строке 33 мы вызываем
.map()
для нашего массива объектов выпечки в состоянии. В качестве единственного аргумента мы предоставляем анонимную стрелочную функцию. У этой функции есть один параметр «выпечка», который представляет каждый элемент массива — в нашем случае объект выпечки. - В строке 34 мы возвращаем некоторый JSX (содержащийся в круглых скобках).
- Начиная со строки 35, у нас есть простой
<div>
, содержащий несколько фрагментов информации. В строке 36 мы добавляем тег<p>
, содержащий название нашего печенья, на которое мы можем удобно ссылаться с помощью точечной нотации объекта JS внутри фигурных скобок, прямо в нашем HTML. 37 и 38 содержат аналогичные выражения JSX для добавления описания выпечки и тега изображения с использованием URL-адреса.
И вуаля, все! У нас есть три красивых компонента теста в нашей DOM, соответствующих данным в нашем массиве, и нам нужно было написать HTML только один раз Как это круто?!
В этом примере использовалось очень небольшое количество очень простых данных, но представьте, например, что у нас есть целая сетка изображений продуктов для рендеринга. Точно так же, как мы сделали здесь, мы могли бы написать один экземпляр HTML (желательно в его собственном компоненте, но логика получается точно такой же) и использовать его в нашей функции .map()
для отображения всей страницы. данных.
Вот и все! Я призываю вас попробовать динамический рендеринг самостоятельно и убедиться в его силе на собственном опыте. Удачного кодирования!