Dwa propsy
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 18 z 42.
Komponenty zazwyczaj przyjmują kilka propsów. Wymień je wszystkie w destrukturyzacji i użyj ich w JSX:
function Product({ name, price }) {
return <p>{name} costs ${price}</p>;
}
<Product name="Laptop" price={999} />
// renderuje: Laptop costs $999Zwróć uwagę na typy: name to ciąg znaków (cudzysłowy), a price to liczba (nawiasy klamrowe). Zachowanie liczb jako liczb ma znaczenie, gdy tylko zaczniesz wykonywać na nich obliczenia.
Wyzwanie
ŁatwyUtwórz linię produktów dla sklepu.
- Spraw, aby
Productprzyjmował propsynameipriceoraz renderował w swoim akapicie{name} costs ${price}. - W App wyrenderuj jeden komponent Product z nazwą
Laptopi ceną999(jako liczbą!). Strona powinna wyświetlaćLaptop costs $999.
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 React