Хотели бы вы почувствовать себя колдуном? Сегодня я научу вас одному из моих любимых заклинаний в репертуаре 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() для отображения всей страницы. данных.

Вот и все! Я призываю вас попробовать динамический рендеринг самостоятельно и убедиться в его силе на собственном опыте. Удачного кодирования!