React Fragment Kullanımı

React Fragment Kullanımı

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

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";

class App extends Component {
  render() {
    return <div>Text</div>;
  }
}

export default App;

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;

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;

Kullanımı

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

class App extends Component {
  render() {
    return (
      <Fragment>
        <div>Text 1</div>
        <div>Text 2</div>
      </Fragment>
    );
  }
}

export default App;

Şimdi sonuca bakalım;

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 kullansanız iyi olur deniliyor :)