REACT

React props.children ile Dinamik Bileşen Kapsayıcılar Oluşturma

React bileşen kapsama yöntemi ile yeni bileşenleri kolayca oluşturabileceğiniz bir kütüphane. props.children bu işlemi yapmanızı sağlayacak olan bir araç.

Onur Dayıbaşı

Published in

Frontend Development With JS

3 min readSep 8, 2021

React, Vue, Angular, Svelte UI yapısının kuvvetli olmasını sağlayan kısım bileşen mekanizması üzerine kurulmuş olması. Yani tüm bileşenler birbirini kapsayarak daha büyük bileşen ve sayfaları oluşturuyor.

Örneğin aşağıdaki Rehber Listesinin nasıl iç içe bileşenlerden oluştuğunu görebilirsiniz.

https://react.semantic-ui.com/elements/placeholder/

Bileşen odaklı UI Geliştirme konusunda daha detaylı bilgi için aşağıdaki yazıları okuyabilirsiniz.

Atomic Design ve Component Driven Development (Link)
UI Bileşenleri Nasıl Evrimleşti ? (Link)

Gelelim konumuza bizim yukarıda gösterdiğim rehber kısmındaki yapıyı 2 şekilde geliştirebiliriz.

1nci Yöntem Şablon/Layout Yapısı Statik

İlk yöntemde varsayımımız gelen verilerin hep aynı şekilde olacağı. Örneğin yukarıdaki rehber resmi için

Avatar
Kişi Bilgileri
İşlem Düğmeleri

const User=()=><div><Avatar><Info><Actions><div>
usersVDOM=users.map(user=><User data={user}>)

2nci Yöntem Şablon/Layout Yapısı Dinamik

2nci yöntem ise bu yapının içerisindeki eleman yapısının eleman sayısının bilinmediği durumlarda

<ImageDisplayer> <Img/> <Img/><Img/></ImageDisplayer>

veya children elemanlarının belli olmadığı durumda, faklı farklı A, B, C bileşenlerini yapıya eklemek istediğimizde

<Layout> <A> <B> <C> </Layout>

Kendi Compose bileşeninizi oluşturmanız gerekiyor.

<ComposeComp> .... </ComposeComp>

Bu bilgileride Compose Component props.children üzerinden erişebilir.

Örnek Kullanım

https://onurdayibasi.dev/sign_up bakabilirsiniz.

Örneğin statik React Kütüphane düğmeleri olsun ben bunlardan istediklerimi bir LibraryContainer içerisinde Layout ayarlayarak formatlayayım..

Bunun için bir Library Tanımı birde LibraryContainer tanımı yapmamız gerekiyor

Library: dediğimiz aslında url ve title oluşan bir düğme. Altında static kütüphaneleri tanımlayıp bunları bir Obj üzerinden paylaşıyoruz…

LibraryContainer: Kendi tag tanımlaması içerisine verilen tüm React elemanlarını alması gerekiyor.

bunun yöntemi ise prop.children üzerinden react bu elemanlara ulaşabilmesini sağlıyor.

LibraryContainer props.children üzerinden elemanlara erişim..

Biraz Daha Dinamik

Tüm Library Objesi içerisindeki tanımlamaları ekrana bastırmak istersek..

Yani aşağıdaki gibi bir şey oluşturmak istiyorum

<LibraryContainer>{Libraries}</LibraryContainer>

ama Libraries içerisindeki her bir eleman aslında bir Class veya Fonksiyon… bu fonksiyonların () çağırımın yapılıp dönen React Element array bu LibraryContainer vermek gerekiyor..

<LibraryContainer>
 {Object.values(Libraries).map(el=>el())}
</LibraryContainer>

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.