Warum benötigen benachbarte JSX-Elemente umschließende Tags in React.js?

Benachbarte JSX-Elemente erfordern ein umschließendes Tag

Beim Erstellen von React.js-Komponenten muss unbedingt sichergestellt werden, dass benachbarte JSX-Elemente in ein umschließendes Tag eingeschlossen sind Tag, um Analysefehler zu vermeiden.

Im bereitgestellten Codeausschnitt gibt der Fehler:

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

an, dass das bedingte Rendern der if-Anweisung dazu führt, dass die div-Elemente ohne einen umschließenden Container gerendert werden. Um dieses Problem zu beheben, ist es notwendig, diese Elemente in ein geeignetes Tag zu packen, z. B. ein div:

<code class="jsx">if (this.state.submitted === false) {
  return (
    <div>
      <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>

Alternativ können Sie die Fragments-API verwenden, um einen umschließenden Kontext zu erstellen, ohne dem DOM unnötige Elemente hinzuzufügen :

<code class="jsx">if (this.state.submitted === false) {
  return (
    <React.Fragment>
      <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>
    </React.Fragment>
  );
}</code>

Das obige ist der detaillierte Inhalt vonWarum benötigen benachbarte JSX-Elemente umschließende Tags in React.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!