Warum erhalte ich die Meldung „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden?'

Benachbarte JSX-Elemente müssen eingeschlossen sein

Beim Versuch, Komponenten basierend auf einer Zustandsvariablen bedingt zu rendern, ist es wichtig, die Regel einzuhalten dass benachbarte JSX-Elemente in ein umschließendes Tag eingeschlossen werden müssen. Diese Anforderung stellt die Gültigkeit des React-Komponentenbaums sicher.

Das Problem tritt auf, wenn Sie eine if-Anweisung verwenden, um Elemente bedingt darzustellen, ohne sie ordnungsgemäß einzuschließen. In Ihrem Code heißt es zum Beispiel:

if(this.state.submitted==false) {
  // ...
}

Dies führt zum Analysefehler „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden.“ Um dieses Problem zu lösen, müssen Sie die bedingten Elemente in ein geeignetes übergeordnetes Tag einschließen, z. B. ein

if(this.state.submitted==false) {
  return (
    <div>
      {/* Conditional content here */}
    </div>
  );
}

return (
  <>
    {/* Conditional content here */}
  </>
);