JSX steht für JavaScript XML und ist eine Syntaxerweiterung für React, die es Entwicklern ermöglicht, HTML-ähnlichen Code in ihren JavaScript-Dateien zu schreiben.

Bei der Arbeit mit JSX stoßen Anfänger oft auf den Fehler „JSX-Ausdrücke müssen ein übergeordnetes Element haben“. Dieser Fehler tritt auf, wenn mehrere Elemente in einem einzigen Ausdruck zurückgegeben werden, ohne dass sie von einem übergeordneten Element umschlossen werden.

Dieser Fehler ist dem Fehler „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen sein“ sehr ähnlich. Wolltest du ein JSX-Fragment <>…</>?“ Fehler.

In diesem Artikel lernst du verschiedene Lösungen kennen, mit denen du dieses häufige Hindernis bei der Arbeit mit React umgehen kannst.

Was ist die Ursache für den Fehler „JSX-Ausdrücke müssen ein übergeordnetes Element haben“?

In JSX gibt es eine Regel, die besagt, dass immer ein einzelnes Element zurückgegeben werden muss. Diese Regel gilt auch für React, was bedeutet, dass jede Komponente nur ein einziges Wurzelelement zurückgeben kann.

Das liegt daran, dass React beim Rendern einer Komponente einen virtuellen DOM-Baum erstellt, der dem HTML-Code entspricht, der letztendlich auf der Seite gerendert wird. Wenn es mehrere Root-Elemente in der JSX gibt, weiß React nicht, wie es damit umgehen soll. Das führt zu dem Fehler „JSX-Ausdrücke müssen ein übergeordnetes Element haben“ oder „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden. Wolltest du ein JSX-Fragment <>…</>?“

Wenn du zum Beispiel versuchst, den folgenden JSX-Code zu rendern:

function App() {
    return (
        <h1>Hello, world!</h1>
        <p>This is a paragraph.</p>
    )
}

Du bekommst die Fehlermeldung „JSX-Ausdrücke müssen ein übergeordnetes Element haben“:

JSX-Ausdrücke müssen ein übergeordnetes Element haben Fehler
JSX-Ausdrücke müssen ein übergeordnetes Element haben-Fehlermeldung

Oder die Fehlermeldung „Benachbarte JSX-Elemente müssen von einem einschließenden Tag umschlossen werden. Wolltest du ein JSX-Fragment <>…</>?“ Fehler:

Benachbarte JSX-Elemente müssen von einem umschließenden Tag umhüllt sein. Wolltest du ein JSX-Fragment <>...</>?-Fehlermeldung
Benachbarte JSX-Elemente müssen von einem umschließenden Tag umhüllt sein. Wolltest du ein JSX-Fragment <>…</>?-Fehlermeldung

Das liegt daran, dass zwei Root-Elemente (<h1> und <p> zurückgegeben werden.

JSX funktioniert ähnlich wie eine Funktion, denn Funktionen können nicht mehrere Werte zurückgeben (es sei denn, sie sind in einem Array eingeschlossen, das als ein einziger Wert gilt).

function myFunc() {
  return value1;
  return value2;
}

Die zweite Rückgabeanweisung in der Render-Funktion ist unerreichbar, weil die erste Rückgabeanweisung immer ausgeführt wird, so dass die zweite Anweisung nicht ausgeführt werden kann.

3 Wege zur Behebung des Fehlers „JSX-Ausdrücke müssen ein übergeordnetes Element haben“

Es gibt drei Hauptmethoden, um diesen Fehler zu beheben:

  • Verwendung eines Div Wrappers
  • Verwendung eines Fragments (<> und </>)
  • Verwendung der Komponente React.Fragment

1. Alle Elemente mit einem Div Wrapper einpacken

Eine der einfachsten Lösungen für den Fehler „JSX-Ausdrücke müssen ein übergeordnetes Element haben“ besteht darin, mehrere JSX-Elemente in ein einziges übergeordnetes Element, wie z. B. ein <div>, zu verpacken.

Auf diese Weise kannst du die Elemente gruppieren und als eine Einheit darstellen. Betrachte zum Beispiel die folgende Komponente:

function App() {
    return (
        <div>
            <h1>Hello, world!</h1>
           <p>This is a paragraph.</p>
        </div>
    )
}

In diesem Beispiel werden die Elemente <h1> und <p> von einem Element <div> umschlossen, das als übergeordnetes Element dient.

2. Alle Elemente mit einem Fragment umhüllen

Eine andere Möglichkeit, das Problem „JSX-Ausdrücke müssen ein übergeordnetes Element haben“ oder „Benachbarte JSX-Elemente müssen von einem umschließenden Tag umhüllt werden. Wolltest du ein JSX-Fragment <>…</>?“ beheben, indem du ein JSX-Fragment verwendest.

Ein Fragment ist eine eingebaute Funktion von React, mit der du eine Liste von Kindern gruppieren kannst, ohne dem DOM zusätzliche Knoten hinzuzufügen. Du kannst ein Fragment verwenden, um mehrere Elemente in ein einziges übergeordnetes Element zu verpacken, ohne dem gerenderten HTML einen zusätzlichen DOM-Knoten hinzuzufügen. Hier ist zum Beispiel eine Komponente:

function App() {
    return (
        <>
            <h1>Hello, world!</h1>
            <p>This is a paragraph.</p>
        </>
    )
}

In diesem Beispiel wird ein JSX-Fragment (<> und </>) verwendet, um mehrere Elemente zu verpacken. Dieses Fragment fungiert als übergeordnetes Element.

3. Alle Elemente mit React.Fragment umhüllen

Eine weitere Möglichkeit, den Fehler „JSX-Ausdrücke müssen ein übergeordnetes Element haben“ zu beheben, ist die Verwendung der Komponente React.Fragment anstelle eines regulären Elements.

Dies funktioniert ähnlich wie die Verwendung eines JSX-Fragments, ist aber etwas expliziter und kann nützlich sein, wenn du deinem übergeordneten Element einen bestimmten Schlüssel oder andere Requisiten geben willst. Hier ist zum Beispiel eine Komponente:

function App() {
    return (
        <React.Fragment>
            <h1>Hello, world!</h1>
            <p>This is a paragraph.</p>
       </React.Fragment>
    )
}

In diesem Beispiel wird die Komponente React.Fragment anstelle eines normalen Elements verwendet, das als übergeordnetes Element dient. Sie wickelt mehrere Elemente in die Tags ein. So kannst du die Elemente gruppieren, ohne dem gerenderten HTML einen zusätzlichen Knoten hinzuzufügen.

Für die Komponente React.Fragment musst du React importieren. Sie ermöglicht es dir außerdem, Requisiten und auch className, style und id zum Fragment selbst hinzuzufügen, was nützlich ist, wenn du Stile oder andere Attribute auf die Gruppe von Elementen innerhalb des Fragments anwenden willst.

So behebst du den Fehler „JSX-Ausdrücke müssen ein übergeordnetes Element haben“ in Conditionals

Wenn du mit bedingten Anweisungen arbeitest, die die ternären Operatoren in React verwenden, stößt du häufig auf die Fehlermeldung „JSX-Ausdrücke müssen ein übergeordnetes Element haben“ oder „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden. Wolltest du ein JSX-Fragment <>…</>?“.

Das passiert, wenn mehrere Elemente innerhalb einer bedingten Anweisung zurückgegeben werden. In diesem Fall ist React nicht in der Lage, sie korrekt darzustellen, und es kommt zu einer der beiden Fehlermeldungen.

function App() {
    return (
        <div>
            {condition ? (
                <h1>Heading 1</h1>
                <p>Paragraph 1</p>
                        ) : (
                <h2>Heading 2</h2>
                <p>Paragraph 2</p>
            )}
        </div>
    )
}

Du kannst diesen Fehler mit einer der drei Methoden beheben, die in diesem Artikel erklärt werden. Vorzugsweise kannst du das React-Fragment (<> und </>) oder das Element <div> verwenden.

function App() {
    return (
        <div>
            {condition ? (
                <>
                    <h1>Heading 1</h1>
                   <p>Paragraph 1</p>
                </>
            ) : (
                <>
                    <h2>Heading 2</h2>
                    <p>Paragraph 2</p>
                </>
            )
            }
        </div>
    )
}

Zusammenfassung

Der Fehler „JSX-Ausdrücke müssen ein übergeordnetes Element haben“ oder „Benachbarte JSX-Elemente müssen von einem umschließenden Tag umhüllt sein. Wolltest du ein JSX-Fragment <>…</>?“ ist eine häufige Hürde, auf die Anfänger beim Erlernen von React stoßen.

Die Verwendung eines <div> Wrappers ist die einfachste Lösung, aber sie kann dem DOM unnötige Divs hinzufügen. Fragmente bieten eine sauberere Lösung, ohne dem DOM zusätzliche Knoten hinzuzufügen.

Jetzt bist du dran: Bist du schon einmal auf dieses Problem gestoßen? Wie hast du es gelöst? Gibt es noch andere Ansätze, die du verwendet hast und die in diesem Artikel nicht behandelt werden? Lass es uns in den Kommentaren wissen!