Menu
Coddy logo textTech

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} />
challenge icon

Wyzwanie

Początkujący

Komponent Greeting ignoruje wszystko, co mu przekazujesz.

  1. Spraw, aby Greeting otrzymywał właściwość name i renderował Hello, {name}! w swoim akapicie.
  2. W App przekaż name="Ada", aby strona wyświetlała Hello, 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>
quiz iconSprawdź się

Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.

Wszystkie lekcje w sekcji Podstawy