Latihan 1: Context API Svelte — Svelte

Latihan 1 dari materi Context API Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awalnya cuma berisi komentar TODO. Editor latihan menjalankan satu komponen, jadi komponen ini memerankan induk sekaligus anak.

Di <script>, impor keduanya dari "svelte": import { setContext, getContext } from "svelte".
Sebagai induk, titipkan nilai "dark" dengan kunci "theme": setContext("theme", "dark").
Sebagai anak, ambil lagi nilainya: const theme = getContext("theme").
Di bawah script, tampilkan <p>Tema: {theme}</p>.

Yang dicek:

Kodemu memanggil setContext( dan getContext(.
Halaman punya <p>.
Teks paragrafnya persis Tema: dark, dengan dark datang dari context.

Hint

Context menitipkan nilai dari induk ke keturunannya. setContext menaruh, getContext mengambil, dan keduanya diimpor dari svelte.
Panggil setContext("theme", "dark") lalu const theme = getContext("theme") langsung di <script>, dengan kunci yang sama persis, lalu tampilkan {theme} di paragraf.
import { setContext, getContext } from "svelte" setContext("theme", "dark") const theme = getContext("theme") lalu <p>Tema: {theme}</p>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Context API Svelte — Svelte

Hint

Memperbarui Aplikasi