Warum erhalte ich in React die Fehlermeldung „Parse-Fehler: Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden“?

Parse-Fehler: Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden

Problem:
Beim Versuch Um Komponenten basierend auf einer Variablen bedingt zu rendern, tritt ein Fehler auf: „Analysefehler: Angrenzende JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden.“

Frage:
Was verursacht diesen Fehler? und wie kann es gelöst werden?

Antwort:
In React muss jede Komponente oder Gruppe von Komponenten in einem einzigen Tag eingeschlossen sein. Im bereitgestellten Code führt das bedingte Rendering dazu, dass benachbarte JSX-Elemente (in diesem Fall die Eingabe- und ReactCSSTransitionGroup-Komponenten) ohne umschließendes Tag angezeigt werden.

Lösung:
Auflösen Um den Fehler zu beheben, schließen Sie diese Elemente in ein geeignetes umschließendes Tag ein, z. B. ein

oder ein React.Fragment.

Beispiel:

<code class="jsx">render: function() {
    return (
      <div>
        {this.state.submitted == false && (
          <>
            <input type="email" onChange={this._updateInputValue} />
            <ReactCSSTransitionGroup>
              <div>
                <a href="#" onClick={this.saveAndContinue}>Request Invite</a>
              </div>
            </ReactCSSTransitionGroup>
          </>
        )}
      </div>
    );
  },</code>

Mit dem Wrapper bietet eine einfache und semantisch neutrale Option zum Gruppieren von Elementen, ohne zusätzliche DOM-Knoten einzuführen.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich in React die Fehlermeldung „Parse-Fehler: 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!

for Error using Conditional dom this input

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