React Fragment Kullanımı

Merhaba, bu yazımda sizlere React 16.2.0 versiyonu ile birlikte gelen Fragment etiketini anlatmaya çalışacağım.

Image for post
Image for post
Adjacent JSX Elements Hatası

Bu hatayı tanıdınız değil mi? :) React ile yeni yeni uğraşmaya başladıysanız, bu hatayı zaman zaman almanız çok normal çünkü React, component ve fonksiyon return kullanımlarında kod bloklarının tek bir kapsayıcı element ile kullanılmasını istiyor. Örnek verecek olursak;

import React, { Component } from 'react';

Yukarıdaki kod bloğunda render metodunun return kısmında tek bir div elementinin içerisinde yazımız var. Bu haliyle çalışmasında herhangi bir sorun yok. Fakat bu div elementinin altına bir tane daha eklesek ne olurdu? Evet, baştaki hatayı alırdık. Bu hatayı gidermek için bir div elementi ile sarmalayabiliriz. Örneğin;

return (
<div>
<div>Text 1</div>
<div>Text 2</div>
</div>
);

Fakat bu kullanım bize ekstradan bir div daha oluşturacaktır. Bu bir çözüm fakat CSS ile stil vermeye başladığımızda bu ekstradan oluşan div bize sorun çıkarabilir. Ayrıca, projenizin büyüdüğünü düşündüğünüzde de onlarca ekstradan div elementi başınızı ağrıtabilir. Tarayıcıda incelediğimizde, şu şekilde bir sonuç alacağız;

Image for post
Image for post
Elements çıktısı 1

Bunu engellemek için ve yine de birden fazla element kullanabilmek için React kütüphanesinin Fragment componentinden yararlanacağız. Fragment’i import edip, kullanmaya başlayabiliriz;

<Fragment> Kullanımı

import React, { Component, Fragment } from 'react';

Şimdi sonuca bakalım;

Image for post
Image for post
Elements çıktısı 2

Gördüğünüz gibi, birden fazla element render ettik ve ekstradan yazılan div elementi de gitmiş oldu.

<> Kullanımı

Fragmentin etiket olarak bir kullanımı var.

return (
<>
<div>Text 1</div>
<div>Text 2</div>
</>
);

Fakat bu kullanım tüm araçlar tarafından henüz tam desteklenmiyor. Zaten React’ın dokümantasyonunda da belirtilmiş, şimdilik <Fragment> kullansanız iyi olur deniliyor :)

Image for post
Image for post
React Dokümantasyon — Fragments

Full-Stack Front End Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store