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

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