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>
  );
}

Alternativ können Sie Fragmente ohne eine zusätzliche Umhüllungsebene anzeigen lassen Nutzen Sie die in React 16.2 eingeführte Fragments-API:

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

Mit dieser Syntax können Sie JSX-Elemente gruppieren, ohne zusätzliche DOM-Knoten einzuführen.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich die Meldung „Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden?'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

if for Error Conditional dom this display issue

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