Komponen Gabungan dengan Context
Bangun komponen multi-bagian yang berbagi state melalui context.
Komponen Gabungan dengan Context adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Komponen Gabungan
Komponen gabungan adalah satu antarmuka logis yang dibagi menjadi beberapa subkomponen yang saling berkoordinasi (tab + tab + TabPanel).
Status Bersama melalui Konteks
Komponen induk menetapkan status bersama dalam konteks; komponen anak membacanya melalui getContext.
<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });Komponen Anak Membaca Konteks
Setiap Tab dan TabPanel mengambil antarmuka pemrograman aplikasi bersama.
<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");Keterikatan Longgar
Komponen anak tidak merujuk langsung ke komponen induk; keduanya berkomunikasi melalui konteks.
API yang Dapat Disusun
Pengguna komponen dapat menyusun ulang dan menyesuaikan subkomponen dengan bebas.
<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>Contoh
Tab, akordeon, menu, kotak daftar, langkah.
Konvensi Penamaan
Gunakan awalan bersama atau ekspor ruang nama agar lebih jelas.
import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";Konteks Aman Tipe
Tentukan kunci simbol + tipe untuk antarmuka bersama.
Kesalahan Saat Disalahgunakan
Jika komponen anak tidak dapat menemukan konteks, tampilkan kesalahan yang ramah untuk membantu pengguna komponen.
Dapat Digunakan Kembali
Komponen gabungan sangat mudah digunakan kembali karena pengguna komponen mengendalikan komposisinya.
Gabungkan dengan Perakit
Komponen gabungan sering menggunakan pola perakit secara internal untuk menyediakan aksesibilitas tanpa tampilan.
Cek Singkat
Bagaimana komponen gabungan berbagi status?
Ringkasan
Komponen gabungan membagi antarmuka pengguna menjadi subkomponen yang dapat disusun dan berkoordinasi melalui konteks.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Komponen Gabungan dengan Context” gratis?
Ya — teks lengkap “Komponen Gabungan dengan Context” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Komponen Gabungan dengan Context”?
Bangun komponen multi-bagian yang berbagi state melalui context. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Komponen Gabungan dengan Context” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Render Props dengan Snippet
- Komponen Orde Tinggi
- Pola Builder untuk UI Tanpa Kepala
- Komponen Gabungan dengan Context