Ponowne używanie komponentów
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 13 z 42.
Właśnie tutaj komponenty się przydają: używaj jednego tyle razy, ile chcesz. Każdy poniższy <Star /> to nowa kopia:
function Star() {
return <span>★</span>;
}
export default function App() {
return (
<div>
<Star />
<Star />
<Star />
</div>
);
}Trzy gwiazdki na ekranie, jedna definicja w kodzie. Zmień definicję raz. Każda kopia zostanie zaktualizowana. To supermoc wielokrotnego użycia, której HTML nigdy nie miał.
Wyzwanie
ŁatwyZbuduj ocenę w postaci trzech gwiazdek.
- Zdefiniuj komponent
Star, który zwraca<span>★</span>. - Wewnątrz istniejącego
<div id="stars">wyrenderuj trzy gwiazdki, używając komponentu trzy razy.
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 React2Wyrażenia JSX
Nawiasy klamroweDziałania matematyczne w nawiasach klamrowychNawiasy klamrowe w atrybutachWywoływanie funkcji w JSXPodsumowanie: wyrażenia JSX3Komponenty
Elementy składoweTwój drugi komponentPonowne używanie komponentówTworzenie stronyPodsumowanie: komponenty