Komponenty złożone z użyciem kontekstu
Twórz wieloczęściowe komponenty, które współdzielą stan za pośrednictwem kontekstu.
Komponenty złożone z użyciem kontekstu 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.
Komponenty złożone
Komponent złożony to jeden logiczny element interfejsu podzielony na kilka współpracujących podkomponentów (Tabs + Tab + TabPanel).
Współdzielenie stanu przez context
Rodzic umieszcza współdzielony stan w context, a dzieci odczytują go za pomocą getContext.
<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });Dziecko odczytuje context
Każdy Tab i TabPanel pobiera współdzielone API.
<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");Luźne powiązanie
Dzieci nie odwołują się bezpośrednio do rodzica, lecz komunikują się za pośrednictwem context.
Komponowalne API
Korzystający z komponentu mogą dowolnie zmieniać układ i dostosowywać podkomponenty.
<Tabs>
<TabList>
<Tab id="a">A</Tab>
<Tab id="b">B</Tab>
</TabList>
<TabPanel id="a">Content A</TabPanel>
<TabPanel id="b">Content B</TabPanel>
</Tabs>Przykłady
Tabs, Accordion, Menu, Listbox, Steps.
Konwencja nazewnicza
Używaj wspólnego prefiksu lub eksportów przestrzeni nazw, aby zachować przejrzystość.
import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";Bezpieczny typowo context
Zdefiniuj klucz symbolu oraz typ współdzielonego API.
Błędy przy nieprawidłowym użyciu
Jeśli dziecko nie może znaleźć context, zgłoś zrozumiały błąd, który wskaże korzystającym z komponentu właściwe rozwiązanie.
Możliwość ponownego użycia
Komponenty złożone można łatwo ponownie wykorzystywać, ponieważ korzystający z nich kontrolują sposób kompozycji.
Łączenie z builderami
Komponenty złożone często wewnętrznie korzystają ze wzorca buildera, aby zapewnić headless accessibility.
Szybkie sprawdzenie
Jak komponenty złożone współdzielą stan?
Podsumowanie
Komponenty złożone dzielą interfejs na komponowalne podkomponenty, które współpracują za pośrednictwem context.
Często zadawane pytania
Czy lekcja „Komponenty złożone z użyciem kontekstu” jest bezpłatna?
Tak — pełny tekst „Komponenty złożone z użyciem kontekstu” 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 „Komponenty złożone z użyciem kontekstu”?
Twórz wieloczęściowe komponenty, które współdzielą stan za pośrednictwem kontekstu. Ć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 „Komponenty złożone z użyciem kontekstu”?
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
- Render props za pomocą snippetów
- Komponenty wyższego rzędu
- Wzorzec Builder dla Headless UI
- Komponenty złożone z użyciem kontekstu