React Academy · Ders

cloneElement ile Props'ları Klonlama ve Enjekte Etme

Gizli props'ları üst bileşenden alt bileşenlere aktarmak için React.cloneElement kullanın.

4. ders / 413 adım

cloneElement ile Props'ları Klonlama ve Enjekte Etme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste bir alt öğeyi klonlamak ve üst bileşenden ek özellikler eklemek için React.cloneElement kullanacaksınız. Böylece alt öğenin bu özellikleri bilmesine gerek kalmayacak.

cloneElement Nedir

`React.cloneElement(element, props, ...children)`, mevcut bir öğeye dayalı yeni bir React öğesi oluşturur ve yeni özellikleri özgün özelliklerle birleştirir. Özgün öğenin türü korunur.
const clone = React.cloneElement(child, { active: true });

cloneElement Neden Kullanılır

Bir üst bileşen, alt öğelerin bundan haberi olmadan etkin durum veya olay işleyicileri gibi davranışları alt öğelere ekleyebilir. Bu yöntem sekme sistemlerinde, akordeonlarda ve form gruplarında kullanılır.

Sekme Çubuğu Örneği

Bir Tabs bileşeni, her Tab alt öğesini klonlayarak `isActive` ve `onClick` özelliklerini otomatik olarak ekleyebilir. Böylece kullanan taraf bunları elle bağlamak zorunda kalmaz.
function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Özellik Birleştirme Kuralları

cloneElement, yeni özellikleri özgün özelliklerin **üzerine** yazarak birleştirir. Özgün öğede aynı anahtara sahip bir özellik varsa yeni değer kazanır. style ve className, elle işlem yapmadığınız sürece birleştirilmez; üzerine yazılır.

Olay İşleyicilerini Birleştirme

Olay işleyicilerinin üzerine yazmak yerine onları birleştirmek için geri çağırma işlevlerini cloneElement'e aktarmadan önce elle birleştirin.
React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

Alt Öğeleri Değiştirme

`cloneElement` çağrısının üçüncü bağımsız değişkeni, öğenin alt öğelerini değiştirir. Özgün alt öğeleri tamamen geçersiz kılmak için yeni içeriği aktarın.
// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

Klonlamadan Önce Öğe Türünü Kontrol Etme

Klonlamadan önce alt öğenin geçerli bir React öğesi olduğunu doğrulayın ve öğe olmayan alt öğeleri (metin, sayılar, null) klonlamaktan kaçınmak için isteğe bağlı olarak türünü de kontrol edin.
if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement ve Bağlam

cloneElement kırılgandır; çünkü alt öğenin yapısının bilinmesini gerektirir. Birçok düzeyden örtük veri aktarmak için genellikle bağlam tercih edilir. cloneElement'i yalnızca doğrudan üst bileşen-alt öğe özellik aktarımı için kullanın.

Modern Alternatif: Oluşturma Özellikleri ve Kancalar

cloneElement'in geçmişte kullanıldığı birçok durumda özel bir kanca veya oluşturma özelliği daha temiz bir çözümdür. Hem üst bileşenin hem de doğrudan alt öğelerin sahibiyseniz cloneElement'i değerlendirin.

Hızlı Kontrol

Özgün öğede ve React.cloneElement'e aktarılan özellik nesnesinde bulunan bir özelliğe ne olur?

Özet

React.cloneElement bir öğeyi klonlar ve yeni özellikler ekler. Birleşik bileşenlerde üst bileşenden alt öğeye örtük özellik aktarımı için kullanın. Hiyerarşi daha derinse bağlamı veya oluşturma özelliklerini tercih edin.

Kurs Tamamlandı

Tebrikler! **React Alt Öğe API'si ve Yuvalar Deseni** kursunu tamamladınız. Esnek düzen bileşenleri oluşturmak için props.children, React.Children yardımcı programlarını, adlandırılmış yuva özelliklerini ve cloneElement'i artık kullanabiliyorsunuz.
Başlamak ücretsiz

Yapay zeka eğitmeniyle React öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
88
Dersler
324

Sıkça Sorulan Sorular

“cloneElement ile Props'ları Klonlama ve Enjekte Etme” dersi ücretsiz mi?

Evet — “cloneElement ile Props'ları Klonlama ve Enjekte Etme” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“cloneElement ile Props'ları Klonlama ve Enjekte Etme” dersinde ne öğreneceğim?

Gizli props'ları üst bileşenden alt bileşenlere aktarmak için React.cloneElement kullanın. React 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.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React 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 4. dersidir.

“cloneElement ile Props'ları Klonlama ve Enjekte Etme” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React 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

  1. props.children Temelleri
  2. React.Children Yardımcıları
  3. Nesne Props'larıyla Adlandırılmış Yuvalar
  4. cloneElement ile Props'ları Klonlama ve Enjekte Etme
← React Academy Sayfasına Dön