Przekazywanie propsów
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 17 z 42.
Przekażmy właściwość od początku do końca. Trzy kroki, zawsze takie same:
// 1. odbierz ją
function Greeting({ name }) {
// 2. użyj jej
return <p>Hello, {name}!</p>;
}
// 3. przekaż ją
<Greeting name="Ada" />Łańcuchy znaków zapisuje się w cudzysłowie. Liczby i wyrażenia umieszcza się w nawiasach klamrowych — obowiązuje tu ta sama zasada co w przypadku atrybutów:
<Score points={97} />Wyzwanie
PoczątkującyKomponent Greeting ignoruje wszystko, co mu przekazujesz.
- Spraw, aby
Greetingotrzymywał właściwośćnamei renderowałHello, {name}!w swoim akapicie. - W App przekaż
name="Ada", aby strona wyświetlałaHello, Ada!.
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>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