Fragments

Es kommt häufig vor, dass eine Komponente mehrere Elemente umfasst. Mit Fragments kannst du eine Liste von Kindelementen gruppieren, ohne dem DOM einen zusätzlichen Knoten hinzuzufügen.

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

Es gibt auch eine neue Kurzschreibweise um diese zu deklarieren.

Motivation

Gängig ist, dass eine Komponente eine Liste von Kindelementen zurückgibt. Nehmen wir diesen React-Schnipsel:

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

<Columns /> muss mehrere <td> Elemente zurückgeben, damit das gerenderte HTML gültig ist. Wenn ein übergeordnetes div in render() von <Columns /> verwendet werden würde, würde das resultierende HTML ungültig sein.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hallo</td>
        <td>Welt</td>
      </div>
    );
  }
}

Eine Ausgabe von <Table /> ergibt dann folgendes:

<table>
  <tr>
    <div>
      <td>Hallo</td>
      <td>Welt</td>
    </div>
  </tr>
</table>

Fragmente lösen dieses Problem.

Verwendung

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>        <td>Hallo</td>
        <td>Welt</td>
      </React.Fragment>    );
  }
}

dies resultiert in einer korrekten Ausgabe von <Table />:

<table>
  <tr>
    <td>Hallo</td>
    <td>Welt</td>
  </tr>
</table>

Kurzschreibweise

Es gibt eine neue kürzere Schreibweise, welche du verwenden kannst um Fragmente zu deklarieren. Diese sieht wie leere Tags aus:

class Columns extends React.Component {
  render() {
    return (
      <>        <td>Hallo</td>
        <td>Welt</td>
      </>    );
  }
}

Du kannst <></> so verwenden, wie du jedes andere Element verwendest. Mit Ausnahme davon, dass es keine Keys oder andere Attribute unterstützt.

Keyed Fragments

Fragmente, die mit der expliziten <React.Fragment> Syntax deklariert wurden, können Keys besitzen. Ein Anwendungsfall dafür ist das Durchlaufen von Daten um ein Array von Fragmenten zu erzeugen, z.B. um eine Beschreibungsliste zu erstellen:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Ohne  `key`, wird React eine Key-Warnung ausgeben
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key ist das einzige Attribut, welches an ein Fragment gegeben werden kann. Zukünftig könnten wir die Unterstützung für zusätzliche Attribute hinzufügen, wie z. B. Event-Handler.

Live Demo

Du kannst die neue JSX Fragment Syntax auf CodePen ausprobieren.