Frontend Academy · Pelajaran

Komponen Gabungan dengan Context

Bagikan state implisit antara komponen induk dan anak-anak yang ditunjuk menggunakan Context, dengan memodelkan API seperti dan .

Pelajaran 1 dari 413 langkah

Komponen Gabungan dengan Context adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Komponen Majemuk?

Komponen majemuk adalah sekumpulan komponen terkait yang dirancang untuk bekerja bersama sebagai satu kesatuan — seperti <select> + <option> milik HTML. Komponen induk membagikan state implisit kepada anak-anak spesifiknya.

Tujuan: API yang Lebih Bersih

Daripada <Select options={[...]} value={x} onChange={...} />, Anda menulis <Select><Option value="a">Apple</Option></Select>. Strukturnya deklaratif dan alami bagi JSX.

Pendekatan Naif (Masalah)

Meneruskan state melalui properti mengharuskan pengguna menghubungkan semuanya. Komponen anak tidak otomatis mengetahui state komponen induknya.

// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
  <TabList>
    <Tab index={0}>Home</Tab>
    <Tab index={1}>Profile</Tab>
  </TabList>
</Tabs>

Konteks sebagai Penghubung

Komponen induk membuat Context dengan state bersama lalu menyediakannya. Komponen anak menggunakan konteks tersebut — tanpa perlu menghubungkan properti secara eksplisit.

import { createContext, useContext, useState } from 'react';

const TabsContext = createContext(null);

export function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

Komponen Anak Menggunakan Konteks

Setiap komponen anak membaca konteks — tidak ada penerusan properti melalui setiap tingkat pohon.

export function Tab({ index, children }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  const isActive = activeIndex === index;
  return (
    <button
      className={isActive ? 'active' : ''}
      onClick={() => setActiveIndex(index)}
    >
      {children}
    </button>
  );
}

export function Panel({ index, children }) {
  const { activeIndex } = useContext(TabsContext);
  if (activeIndex !== index) return null;
  return <div className="panel">{children}</div>;
}

Properti Statis untuk Kemudahan Ditemukan

Pasang subkomponen pada komponen induk agar pengguna dapat menemukannya melalui pelengkapan otomatis.

Tabs.Tab = Tab;
Tabs.Panel = Panel;

// Usage:
<Tabs>
  <Tabs.Tab index={0}>Home</Tabs.Tab>
  <Tabs.Tab index={1}>Profile</Tabs.Tab>
  <Tabs.Panel index={0}>Home content</Tabs.Panel>
  <Tabs.Panel index={1}>Profile content</Tabs.Panel>
</Tabs>

Contoh Nyata: Disclosure

Widget disclosure memiliki anak Trigger dan Panel yang berbagi state terbuka atau tertutup melalui konteks.

function Disclosure({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <DisclosureContext.Provider value={{ isOpen, setIsOpen }}>
      <div>{children}</div>
    </DisclosureContext.Provider>
  );
}

function Trigger({ children }) {
  const { isOpen, setIsOpen } = useContext(DisclosureContext);
  return <button onClick={() => setIsOpen(o => !o)}>{children}</button>;
}

function Panel({ children }) {
  const { isOpen } = useContext(DisclosureContext);
  return isOpen ? <div>{children}</div> : null;
}

Hook sebagai API Publik

Ekspor hook khusus agar pengguna dapat membuat komponen mereka sendiri di atas komponen Anda.

export function useTabs() {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
  return ctx;
}

Komponen Majemuk Polimorfik

Izinkan komponen induk merender elemen apa pun melalui properti as atau pola asChild (pendekatan Radix UI). Dengan begitu, komponen majemuk dapat digabungkan dengan JSX arbitrer.

Pola Komponen Majemuk Tanpa Tampilan

Pustaka tanpa tampilan (Radix, Headless UI) menyediakan komponen majemuk tanpa penataan gaya — logika aksesibilitas sudah tersedia, dan Anda menatanya sesuai kebutuhan.

Jebakan: Pemeriksaan Komponen Anak

Pola lama menggunakan React.Children untuk memeriksa komponen anak — rapuh dan mudah rusak. Selalu utamakan konteks untuk berbagi state.

Pemeriksaan Singkat

Dalam pola komponen majemuk, bagaimana komponen anak berkomunikasi dengan komponen induknya?

Jawab di pelajaran interaktif

Ringkasan: Komponen Majemuk

Komponen majemuk memungkinkan bagian-bagian terkait bekerja sebagai satu kesatuan deklaratif. Gunakan Context untuk berbagi state — Provider pada komponen induk, dan useContext pada komponen anak. Pasang subkomponen sebagai properti statis agar mudah ditemukan. Ekspor hook khusus sebagai API publik. Radix dan Headless UI merupakan referensi yang baik. Utamakan konteks daripada pemeriksaan Children.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

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 Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Komponen Gabungan dengan Context”?

Bagikan state implisit antara komponen induk dan anak-anak yang ditunjuk menggunakan Context, dengan memodelkan API seperti dan . Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 1 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

← Kembali ke Frontend Academy