Ten sam komponent, nowe dane
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 19 z 42.
Połącz ponowne użycie i propsy, a otrzymasz właściwy wzorzec: jeden komponent renderowany wiele razy z różnymi danymi.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />Trzy odznaki, trzy etykiety, jedna definicja. Każda lista, menu, kanał aktualności i galeria, które kiedykolwiek widziałeś w internecie, opierają się na tym wzorcu (później wygenerujemy nawet kopie z tablicy).
Wyzwanie
ŁatwyWdróż promocyjne odznaki sklepu.
- Spraw, aby
Badgeprzyjmował właściwośćlabeli renderował ją wewnątrz swojego elementu<span>. - Wewnątrz
<div id="badges">wyrenderuj dwie odznaki: pierwszą z etykietąNew, a następnie z etykietąSale.
Spróbuj swoich sił
<!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>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Poznaj React
Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React4Props
Czym są propsy?Przekazywanie propsówDwa propsyTen sam komponent, nowe daneProp childrenPodsumowanie: propsy