Latihan 1: Children Helper — SolidJS

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

Kode awal punya App yang sudah memakai <Wrapper><p>Konten child</p></Wrapper>. Itu tetap. Wrapper masih return null. Isi Wrapper:

Impor children dari "solid-js".
Di badan Wrapper, tulis const resolved = children(() => props.children).
Kembalikan <div class="wrapper">{resolved()}</div>.

Yang dicek:

Ada elemen dengan kelas wrapper di halaman.
Kodemu memanggil helper-nya: children(() => ...). {props.children} langsung gak dihitung.
Sesudah class="wrapper"> langsung ada {: isinya datang dari kiriman pemanggil, bukan diketik di dalam Wrapper.
Ada komponen yang ditulis dengan tag pembuka tanpa atribut, seperti <Wrapper>, dan isi sebelum tag penutupnya. App di kode awal sudah begitu.

Hint

Komponen pembungkus gak tahu isinya: dia menyediakan tempat, lalu menaruh kiriman pemanggilnya di sana, dan helper children membaca kiriman itu sekali.
Impor children dari solid-js, simpan children(() => props.children) di variabel di badan Wrapper, lalu tampilkan variabel itu dengan kurung di dalam div berkelas wrapper.
const resolved = children(() => props.children) lalu return <div class="wrapper">{resolved()}</div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Children Helper — SolidJS

Hint

Memperbarui Aplikasi