Heim  >  Artikel  >  Web-Frontend  >  Wie löse ich das Problem „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden“ in React.js auf?

Wie löse ich das Problem „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden“ in React.js auf?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-30 08:08:27411Durchsuche

How Do I Resolve

Parser-Fehler: Behebung von „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden“

Beim Versuch, Komponenten in einer React.js-Anwendung bedingt zu rendern, kann es zu Problemen kommen der Fehler „Parse-Fehler: Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden.“ Dies tritt auf, wenn mehrere JSX-Elemente direkt nebeneinander platziert werden, ohne in einer übergeordneten Komponente enthalten zu sein.

Der Fehler kann behoben werden, indem sichergestellt wird, dass alle JSX-Elemente in einer einzigen übergeordneten Komponente eingeschlossen sind, wie unten dargestellt:

// Incorrect: Adjacent JSX elements will result in a parse error
return (
  <Comp1 />
  <Comp2 />
);
// Correct: Enclose elements within a parent component
return (
  <div>
    <Comp1 />
    <Comp2 />
  </div>
);

Alternativ kann die API React.Fragment verwendet werden, um eine virtuelle übergeordnete Komponente zu erstellen, ohne zusätzliche DOM-Knoten hinzuzufügen:

// Fragments allow for grouping JSX elements without adding nodes to DOM
return (
  <React.Fragment>
    <Comp1 />
    <Comp2 />
  </React.Fragment>
);

Von Durch das Einschließen benachbarter JSX-Elemente in eine entsprechende übergeordnete Komponente können Entwickler den Fehler „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden“ beheben und sicherstellen, dass ihre React-Anwendungen wie erwartet gerendert werden.

Das obige ist der detaillierte Inhalt vonWie löse ich das Problem „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden“ in React.js auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn