We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

Fragments

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

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.

Ist diese Seite hilfreich?Bearbeite diese Seite