Latihan 1: Context Solid — SolidJS

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

Kode awal punya ThemedText yang mengembalikan  kosong, dan App yang mengembalikan <ThemedText />. Buat context tema:

Impor createContext dan useContext dari "solid-js".
Di luar komponen, tulis const ThemeContext = createContext("light").
Di ThemedText, baca nilainya: const theme = useContext(ThemeContext), lalu kembalikan Tema: {theme}.
Di App, bungkus <ThemedText /> dengan <ThemeContext.Provider value="dark">...</ThemeContext.Provider>.

Yang dicek:

Kodemu memuat createContext dan useContext.
 berisi persis Tema: dark, dan isinya nilai yang dibaca lewat useContext, {theme}, bukan dark yang diketik.

Hint

Context punya dua sisi: Provider yang menyediakan nilai untuk semua komponen di dalamnya, dan useContext yang membacanya dari Provider terdekat di atas.
Buat ThemeContext dengan createContext("light") di luar komponen. Di ThemedText, simpan useContext(ThemeContext) di variabel dan tampilkan di paragraf. Di App, bungkus ThemedText dengan Provider bernilai "dark".
const ThemeContext = createContext("light") lalu di ThemedText: const theme = useContext(ThemeContext); return Tema: {theme} dan di App: <ThemeContext.Provider value="dark"><ThemedText /></ThemeContext.Provider>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Context Solid — SolidJS

Hint

Memperbarui Aplikasi