Sahte Kapsayısı Etiket: React.Fragment

ReactJS’de JSX formatında HTML etiketleri her zaman bir kapsayıcı içerisinde olması gerekmektedir. Bir XML yapısı gibi mutlaka bir üst etiket olması şartı vardır. Bu şart çoğu zaman sıkıntı çıkarmaz ama bazı durumlarda (özellikle şarta bağlı render yapılması istendiğinde) problem çıkarabilir. Bu şartı aşmak React sınırları içerisinde imkansızdır, eğer bu şarta her zaman uyarsak gerek CSS tarafında gerek HTML yapısı bozulması açısından kötü sonuçlar doğabilmektedir. Bu problemin önüne geçebilmek için Fragment isminde kapsayıcı eleman olarak kullanılabilen ama DOM içerisinde hiçbir mevcudiyeti olmayan bir component vardır. Bu component sayesinde bu gibi problemlerin önüne geçmek mümkündür.

Örneğin bir araç çubuğumuz var ve burada bazı butonların bazı durumlarda görüntülenmesini veya görüntülenmemesini istiyoruz. Fakat araç çubuuğ bölgesini kontrol eden bir CSS yapımız var ve bu yapıya göre butonlar mutlaka “toolbar-container” içerisinde doğrudan bulunmaları gerekiyor. Bu durumu kodlar üzerinden açıklamaya çalışalım:

custom.css :

.toolbar-container > .btn {
   margin-right: 10px;
   height: 40px;
}

App.js içerisindeki render bölgesi:

<div class="toolbar-container">
  <button class="btn btn-primary"
    onClick={() => {
      this.state.mode = 'add';
      this.setState(this.state);
    }}>
    Ekle
  </button>
  { this.state.mode == 'add' ? (
    <span />
  ) : (
    <span>
      <button class="btn btn-primary">
        Düzenle
      </button>
      <button class="btn btn-primary">
        Sil
      </button>
    </span>
  )}
</div>

Burada görüldüğü üzere JSX kurallarına göre şart içerisinde bir kapsayıcı eleman olması gerektiğinden span etiketini kapsayıcı olarak kullandık fakat CSS bozulmaktadır. Bu durumda React.Fragment elemanını kullanaraka DOM içerisinde stillerin bozulması problemini çözebiliriz.

<div class="toolbar-container">
  <button class="btn btn-primary"
    onClick={() => {
      this.state.mode = 'add';
      this.setState(this.state);
    }}>
    Ekle
  </button>
  { this.state.mode == 'add' ? (
    <React.Fragment />
  ) : (
    <React.Fragment>
      <button class="btn btn-primary">
        Düzenle
      </button>
      <button class="btn btn-primary">
        Sil
      </button>
    </React.Fragment>
  )}
</div>

Okuduğunuz için teşekkür ederiz. Herkese bol kodlamalı günler dileriz.