Тот же компонент, новые данные
Часть раздела Основы путешествия по React на Coddy — урок 19 из 42.
Объедините повторное использование и props, и вы получите настоящий паттерн: один компонент, отрендеренный много раз с разными данными.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />Три badges, три label, одно определение. Каждый список, меню, лента и галерея, которые вы когда-либо видели в вебе — это данный паттерн (позже мы даже будем генерировать копии из массива).
Задание
ЛегкоОтправьте промо-бейджи магазина.
- Сделайте так, чтобы
Badgeпринимал пропlabelи рендерил его внутри своего<span>. - Внутри
<div id="badges">отрендерите два бейджа: первый с labelNew, затем с labelSale.
Попробуйте сами
<!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Итоги: пропсы