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

<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>