Fragmentler

Bir componentin birden çok element return etmesi React’te yaygın olarak kullanılır. Fragmentler, DOM’a fazladan etiket eklemeden childları gruplanmasına izin verir.

Normalde React’te bir componentin içeriği kapsayıcı bir element ile return edilirdi. Kapsayıcı element olmazsa hata veriyordu. Buda fazladan <div> tagı oluşturulmasına sebep oluyordu. Fakat React v16.2.0 ile artık hayali bir kapsayıcı olan Fragmenti oluşturabiliyoruz. Bu fragmentler çıktıyı kapsadığı için içerik return edilebilecek fakat çıktıda görünmeyeceklerdir. Böylece fazladan div oluşumu önlenmiş olacaktır.

Aşağıdaki içeriği React componentinde return etmek istediğimizi düşünelim.

Biraz yazı
<h2>Başlık</h2>
Daha fazla yazı
<h2>Diğer başlık</h2>
Daha fazla yazı

React versiyon 16.2.0’dan önce bunu gerçekleştirmenin tek yolu, childları div, span gibi bir tag ile aşağıdaki gibi sarmalamaktır:

render() {
  return (
    // Fazladan bir div :(
    <div>
      Biraz yazı
      <h2>Başlık</h2>
      Daha fazla yazı
      <h2>Diğer başlık</h2>
      Daha fazla yazı
    </div>
  );
}

Kullanımı

return edilecek değerleri <React.Fragment> componenti içerisine yerleştirmeniz yeterli.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Merhaba</td>
        <td>Dünya</td>
      </React.Fragment>
    );
  }
}

React.Fragment yerine sadece Fragment ile kapsamak isterseniz aşağıdaki gibi bir yol izleyebilirsiniz.

const Fragment = React.Fragment;

<Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</Fragment>

// Her ikiside aynı şeydir
<React.Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</React.Fragment>

Kısa Syntax

Fragmentler için yeni bir kısa syntaxta var ancak henüz tüm popüler toollar (araçlar) tarafından desteklenmemektedir.

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Merhaba</td>
        <td>Dünya</td>
      </>
    );
  }
}

<></> kullanabilirsiniz fakat keys ya da attribute kullanımını desteklemez (Sadece kapsayıcı olarak kullanılır).

Birçok toolsun henüz kısa syntax kullanımını desteklemediğini unutmayın, bu nedenle destek gelene kadar açıkça <React.Fragment> yazın.

Keyli Fragmentler

<React.Fragment> syntaxı ile bildirilen parçaların keyleri olabilir. Örneğin bir açıklama listesi oluşturmak için:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // `key` olmazsa, React bir key uyarısı verecektir
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Fragmente aktarılabilen tek attribute keydir. Gelecekte, click-change olayları gibi ek attributeler için destek ekleyebiliriz.

CodePen’de Deneyin

Sıradaki Gelişmiş Kılavuz: Lifecycle Fonksiyonları