React.Fragment Nedir?

Bu makalemizde React.Fragment adlı yardımcı component’in ne işe yaradığına örnekler ile bakacağız. Birçok SPA framework’unu kullandım en sık kullandığım SPA framework’ü olan Angular framework’ünde <ng-container></ng-container> adlı özelliği kullanarak aynı ihtiyacı karşılıyorduk React tarafında bu ihtiyacı karşılamak için React.Fragment adlı yardımcı component’i kullanacağız.

React.Fragment Nedir?

React.Fragment Nedir?

Bu örneği en güzel şekilde şöyle açıklayabiliriz web sayfanızda <ul> elementi var ve bu element içerisinde tanımlı olan 3 <li> etiketi olduğunu varsayalım 3 li element’i dışında 4 li ementininde farklı bir Component’den getirmeye çalışalım fakat burada şöyle bir sorun doğuyor 4 li element’inin bir Component’inin render fonksiyonundan dönebilmesi için bir root element tarafından sarılması gerekiyor neden derseniz React’ın render fonksiyonundan kural gereği tek bir root element dönebiliyor ve onun altında istenilen sayıda element eklenebiliyor ve genellikle bu alt elementler için belirlenecek root element için div kullanılıyor ve sorun tam olarak burada başlıyor ul elementi altına eklemek istediğimiz 4 adet li elementini div etiketine sarılmış olarak yani div etiketi 4 li etiketinin root elementi olarak ayarlanmış olarak dönderilecek ve böylelikle ul elementinin 3.elementinden sonra div elementi eklenmiş olacak ama bizim istediğimiz Component içerisindeki 4 elementin direkt olarak ul elementine eklenmesini istiyoruz öncelikle yaşadığımız sorunun örnek koduna göz atalım.

Hatalı olan kod örneğimiz şu şekilde.

Yanlış Kullanım

Bu kodu çalıştırdığımızda yeni tarayıcılar bunu düzgün bir biçimde render edecektir 3 li elementinden sonraki li’ler her ne kadar div altında olsada tarayıcılar tarafından bu durum gözardı edilerek düzgün bir render işlemi olacaktır ama olay sadece render değil bu li elementlerine bir stil uygulandığını düşünün ve bu li elementleri için uygulanan seçicininde ul > li olduğunu varsayarsak 3.li elementinden sonraki li elementlerine div altında kaldıkları için css stili uygulanmayacaktır yada javascript seçicileri doğru olarak çalışmayabilir başka bir örnek verirsek en olası yaşayacağınız sorunlardan biride javascript kütüphaneleri için oluşturmuş olduğunuz html elementlerinin hiyerarşisi çok önemli olduğundan ekstra eklenecebilecek div v.b. elementler ile kütüphanelerin düzgün çalışmamasına neden olabilir açıkçası üstteki gibi bir kullanımda farklı birçok sorun ile karşılaşmanız olasıdır. Ayrıca buradaki tek sorunu sadece ul-li elementleri ile yaşayacağınızı düşünmeyin bu sadece bir örnek diğer tüm html elementleri için aynı durum sözkonusudur.

Üstteki kod bloğu sonucunda ortaya çıkan html şu şekildedir açıkças 3.li elementinden sonra oluşan sorun gözükmektedir.


Peki üstteki kodun doğru şekilde yazımı nasıl olmalı onu görelim.

Doğru Kullanım

Üstte göreceğiniz üzere React.Fragment adlı yardımcı component kullanılarak içerisindeki elementlerin üst bir root yer almadan sayfaya render edilmesi sağlanıyor ve alttaki gibi temiz bir çıktı elde edebiliyoruz.


Kısa Sözdizimi

React.Fragment için kullanabileceğiniz kısa bir sözdizimi’de mevcuttur. Alttaki örnek kod bloğunda görebileceğiniz üzere içi boş etiketler açıp kapatarak React.Fragment yazmadanda kısa şekilde bir kullanım sağlayabilirsiniz.


React.Fragment için örnekli olarak anlatabileceklerim bu kadar umarım ne için kullanılabileceği ve ne tür ihtiyaçlarınız için yardımınıza yetişelebilecek yardımcı bir component olduğu konusunda yardımcı olabilmişimdir. Üstteki kodlarımızı ve çıktıya alttaki demo’dan erişebilirsiniz.

📚 Kaynaklar

📚 Diğer React Makaleleri


✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın