bind:this dla referencji do elementów DOM
Uzyskaj referencję do węzła DOM na potrzeby imperatywnych interakcji.
bind:this dla referencji do elementów DOM to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Uzyskiwanie odwołania do DOM
Użyj bind:this, aby uzyskać odwołanie do elementu DOM, podobnie jak w przypadku useRef w React.
Deklarowanie i wiązanie
Zadeklaruj zmienną, a następnie utwórz z nią wiązanie.
<script>
let inputEl;
</script>
<input bind:this={inputEl} />Dostępne po zamontowaniu
Odwołanie ma wartość null do chwili zamontowania komponentu. Użyj onMount, aby uzyskać do niego bezpieczny dostęp.
<script>
import { onMount } from "svelte";
let inputEl;
onMount(() => inputEl.focus());
</script>Metody imperatywne
Wywołuj metody DOM, takie jak focus() i scrollIntoView(), lub odtwarzaj multimedia.
function play() { audioEl.play(); }Odczytywanie układu
Użyj getBoundingClientRect() do pomiarów. Jeśli przed chwilą wprowadzono zmiany, umieść wywołanie w tick().
Odwołania do komponentów
bind:this działa również z komponentami Svelte. Zmienna przechowuje instancję komponentu.
<MyComp bind:this={comp} />Wywoływanie metod komponentu
Metody eksportowane z komponentu za pomocą export function można wywoływać przez odwołanie.
Wiele elementów
W przypadku list można zbierać odwołania w tablicy, ale warto rozważyć użycie akcji.
Kiedy unikać
W miarę możliwości preferuj wiązania deklaratywne i stan reaktywny zamiast odwołań imperatywnych.
Czyszczenie
Odwołanie przyjmuje wartość null po odmontowaniu elementu. Należy unikać nieaktualnych odwołań.
Łączenie z akcjami
W przypadku powtarzalnych wzorców DOM zamknij je w akcji Svelte zamiast używać bind:this.
Szybkie sprawdzenie
Kiedy można użyć powiązanego elementu?
Podsumowanie
bind:this udostępnia odwołanie do elementu DOM lub komponentu, dostępne od momentu onMount, aby wykonywać operacje imperatywne.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „bind:this dla referencji do elementów DOM” jest bezpłatna?
Tak — pełny tekst „bind:this dla referencji do elementów DOM” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „bind:this dla referencji do elementów DOM”?
Uzyskaj referencję do węzła DOM na potrzeby imperatywnych interakcji. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „bind:this dla referencji do elementów DOM”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- bind:value dla pól tekstowych
- bind:checked dla pól wyboru
- bind:group dla grup przycisków radiowych i pól wyboru
- bind:this dla referencji do elementów DOM