Context ile Birleşik Bileşenler
ve gibi API'leri modellemek için Context kullanarak bir üst bileşen ile belirlenmiş alt bileşenleri arasındaki örtük durumu paylaşmayı öğrenin.
Context ile Birleşik Bileşenler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Bileşik Bileşenler Nedir
Bileşik bileşenler, HTML'deki <select> + <option> gibi tek bir birim olarak birlikte çalışmak üzere tasarlanmış ilişkili bileşenler kümesidir. Üst bileşen, örtük durumu belirli alt bileşenleriyle paylaşır.
Amaç: Daha Temiz Arayüzler
<Select options={[...]} value={x} onChange={...} /> yazmak yerine <Select><Option value="a">Apple</Option></Select> yazarsınız. Yapı bildirimseldir ve JSX'e özgüdür.
Saf Naif Yaklaşım (Sorun)
Durumu özellikler üzerinden aktarmak, tüketicinin her şeyi kendisinin bağlamasını gerektirir. Alt bileşenler, üst bileşenin durumunu kendiliğinden bilemez.
// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
<TabList>
<Tab index={0}>Home</Tab>
<Tab index={1}>Profile</Tab>
</TabList>
</Tabs>Bağlayıcı Olarak Context
Üst bileşen, paylaşılan durumla bir Context oluşturur ve bunu sağlar. Alt bileşenler bağlamı tüketir; açıkça özellik bağlamaya gerek kalmaz.
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>
);
}Alt Bileşenler Tüketir
Her alt bileşen bağlamdan okur; ağaç boyunca özellikleri aşağıya aktarmaya gerek yoktur.
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>;
}Keşfedilebilirlik İçin Statik Özellikler
Kullanıcıların alt bileşenleri otomatik tamamlama aracılığıyla keşfedebilmesi için bunları üst bileşene ekleyin.
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>Gerçek Örnek: Açılır-Kapanır Bölüm
Açılır-kapanır bir araçta, Trigger ve Panel alt bileşenleri durumu bağlam aracılığıyla paylaşır.
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;
}Genel API Olarak Kancalar
Kullanıcıların kendi bileşenlerini sizin bileşenlerinizin üzerine kurabilmesi için özel bir kanca dışa aktarın.
export function useTabs() {
const ctx = useContext(TabsContext);
if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
return ctx;
}Çok Biçimli Bileşik Bileşenler
Üst bileşenlerin bir as özelliği veya asChild kalıbı (Radix UI yaklaşımı) aracılığıyla herhangi bir öğeyi oluşturmasına izin verin. Böylece bileşik bileşenler rastgele JSX yapılarıyla birleştirilebilir.
Stilsiz Bileşik Bileşen Kalıpları
Stilsiz kütüphaneler (Radix, Headless UI), herhangi bir stil içermeyen bileşik bileşenler sunar; erişilebilirlik mantığı yerleşiktir ve stili ihtiyacınıza göre belirlersiniz.
Sorun: Alt Bileşenleri İnceleme
Daha eski bir kalıp, alt bileşenleri incelemek için React.Children kullanıyordu; bu yaklaşım kırılgan ve güvenilmezdir. Durum paylaşımı için her zaman bağlamı tercih edin.
Hızlı Kontrol
Bileşik bileşen kalıbında alt bileşenler üst bileşenle nasıl iletişim kurar?
Özet: Bileşik Bileşenler
Bileşik bileşenler, ilişkili parçaların tek bir bildirimsellik birimi olarak birlikte çalışmasını sağlar. Durum paylaşımı için Context kullanın; üst bileşende Provider, alt bileşenlerde useContext kullanın. Keşfedilebilirlik için alt bileşenleri statik özellikler olarak ekleyin. Genel API olarak özel bir kanca dışa aktarın. Radix ve Headless UI iyi başvuru kaynaklarıdır. Alt bileşenleri incelemek yerine bağlamı tercih edin.
Sıkça Sorulan Sorular
“Context ile Birleşik Bileşenler” dersi ücretsiz mi?
Evet — “Context ile Birleşik Bileşenler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Context ile Birleşik Bileşenler” dersinde ne öğreneceğim?
ve gibi API'leri modellemek için Context kullanarak bir üst bileşen ile belirlenmiş alt bileşenleri arasındaki örtük durumu paylaşmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Context ile Birleşik Bileşenler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Context ile Birleşik Bileşenler
- Render Özellikleri ve HOC Kalıpları
- Modallar ve Araç İpuçları için Portallar
- Hata Sınırları