Warum erhalte ich in React die Fehlermeldung „Parse-Fehler: Benachbarte JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden'?-js-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-11-01 14:23:29

Original

297 Leute haben es durchsucht

Why Do I Get

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>

Nach dem Login kopieren

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!