Рендеринг списка
Часть раздела Основы путешествия по React на Coddy — урок 35 из 42.
Данные обычно поступают в виде массивов, и map превращает массив в список элементов:
const fruits = ['Apple', 'Banana', 'Cherry'];
<ul>
{fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>map вызывает вашу стрелочную функцию по одному разу для каждого элемента и собирает возвращённые элементы <li>. React рендерит весь массив. Добавьте fruit в данные, и list вырастет сам по себе; разметка никогда не меняется.
Атрибут key={fruit} дает каждому элементу стабильную идентичность. Подробнее об этом в следующем уроке; а пока всегда добавляйте уникальный key к элементу, который вы возвращаете из map.
Задание
ЛегкоОтрисуйте меню из данных.
- Внутри
<ul id="fruit-list">используйтеmap, чтобы отрисовать по одному<li>для каждого фрукта в массиве. - Каждый
<li>отображает название фрукта и использует его в качествеkey.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React4Пропсы (Props)
Что такое пропсы?Передача пропсовДва пропсаТот же компонент, новые данныеПроп childrenИтоги: пропсы7Условия и списки
Тернарный рендерингОтображение с помощью &&Рендеринг спискаВажность ключейФильтрация, затем отображениеИтоги: Условия и списки