Warum erhalte ich in React die Fehlermeldung „Parse-Fehler: Angrenzende 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

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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man Wölfe zähme

1 Monate vor By DDD

Kraftstufen für jeden Feind & Monster in R.E.P.O.

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer

2 Wochen vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Java-Tutorial

1662

14

CakePHP-Tutorial

1418

52

Laravel-Tutorial

1311

25

PHP-Tutorial

1261

29

C#-Tutorial

1234

24

Mehr anzeigen