Fragment'ler

React’teki ortak model, bir bileşenin birden fazla öğe döndürmesidir. Fragmentler, Dom’a ekstra düğüm eklemeden bir alt elemanlar listesini gruplandırmanıza izin verir.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Onları tanımlamak için yeni bir kısa sözdizimi de vardır.

Motivation

Bir bileşenin alt eleman listesini döndürmesi için yaygın bir modeldir. Örnek için bu React kod parçasına bakın.

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

Oluşturulan HTML’in geçerli olması için <Columns /> birden fazla <td> öğesini döndürmesi gerekir. Bir üst div <Columns /> bileşeninin render() metodu içinde kullanılmışsa, sonuçta ortaya çıkan HTML geçersiz olacaktır.

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

<Table /> çıktısının sonucu:

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Fragmentler bu sorunu çözer.

Usage

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

<Table /> çıktısının doğru sonucu:

<table>
  <tr>
    <td>Merhaba</td>
    <td>Dünya</td>
  </tr>
</table>

Short Syntax

Fragmentleri tanımlamak için kullanabileceğiniz yeni, daha kısa bir sözdizimi var. Boş etiketlere benziyor:

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

Anahtarları veya nitelikleri desteklememesi dışında, diğer elementleri kullandığınız gibi <></> kullanabilirsiniz.

<<<<<<< HEAD Not, birçok araç henüz desteklemiyor. Bu nedenle, destekleninceye kadar <React.Fragment> yazmak isteyebilirsiniz.

=======

e1abbdecfd1a5a804bd38852e88373f54ddde014

Keyed Fragments

Açıkça belirtilen <React.Fragment> sözdiziminin anahtarları olabilir. Bunun için bir kullanım durumu, bir koleksiyonun bir fragmentler dizisine eşlenmesidir. — örneğin, bir açıklama listesi oluşturmak için:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // `key` olmadan, React önemli bir uyarıyı tetikler
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key, Fragment‘e iletilebilecek tek özelliktir. Gelecekte, olay yöneticileri gibi ek özellikler için destek ekleyebiliriz.

Live Demo

Bununla yeni JSX fragment sözdizimini deneyebilirsiniz CodePen.