Heim > Artikel > Web-Frontend > Warum erhalte ich in React die Fehlermeldung „Parse-Fehler: Angrenzende JSX-Elemente müssen in ein umschließendes Tag eingeschlossen werden“?

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

Mary-Kate OlsenOriginal: 2024-11-05 09:36:02364Durchsuche

Why am I getting a

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

Beim Rendern von React-Komponenten ist es wichtig, die Regel einzuhalten, dass benachbarte JSX-Elemente eingeschlossen werden müssen in einem übergeordneten Tag. Dieser Fehler tritt auf, wenn Elemente nebeneinander existieren, ohne von einem gemeinsamen übergeordneten Element umschlossen zu werden.

Fehlerursache

Der bereitgestellte Code enthält eine if-Anweisung, die zwei div-Elemente basierend auf bedingt rendert der Wert der Variable this.state.submitted. Diese Elemente liegen jedoch nebeneinander und werden nicht von einem übergeordneten Tag umschlossen.

Lösung

Um diesen Fehler zu beheben, schließen Sie die bedingt gerenderten Elemente in ein umschließendes Tag ein. Dadurch wird sichergestellt, dass die JSX-Struktur gültig ist. Sie könnten den Code beispielsweise wie folgt ändern:

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        <>
          <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
            <div className="button-row">
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
            </div>
          </ReactCSSTransitionGroup>
        </>
      )}
    </div>
  )
},</code>

In diesem geänderten Code haben wir die bedingt gerenderten Elemente in ein umschließendes

eingeschlossen. Etikett. Dadurch wird sichergestellt, dass die angrenzenden JSX-Elemente ein gültiges übergeordnetes Element haben und der Fehler behoben wird.

Fragments API (Optional)

Alternativ zur Verwendung eines zusätzlichen div-Tags können Sie die Fragments API verwenden . Dadurch können Sie Elemente gruppieren, ohne dem DOM einen zusätzlichen Knoten hinzuzufügen. Der folgende Code zeigt, wie Sie Fragmente verwenden können:

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        <>
          <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
            <div className="button-row">
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
            </div>
          </ReactCSSTransitionGroup>
        </>
      )}
    </div>
  )
},</code>

In diesem Code haben wir das Komponente zum Umschließen der bedingt gerenderten Elemente. Dies erzielt das gleiche Ergebnis wie die Verwendung eines

Tag, aber es fügt dem DOM keine zusätzlichen Knoten hinzu.

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

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

Vorheriger Artikel：Bleiben Sie in der Webentwicklung einen Schritt voraus: Neueste Nachrichten, Tools und Erkenntnisse Nr. 57Nächster Artikel：Bleiben Sie in der Webentwicklung einen Schritt voraus: Neueste Nachrichten, Tools und Erkenntnisse Nr. 57

In Verbindung stehende Artikel

Mehr sehen