Pourquoi les éléments JSX adjacents ont-ils besoin de balises englobantes dans React.js ?

Les éléments JSX adjacents nécessitent une balise englobante

Lors de la création de composants React.js, il est essentiel de s'assurer que les éléments JSX adjacents sont enveloppés dans une balise englobante. pour éviter les erreurs d'analyse.

Dans l'extrait de code fourni, l'erreur :

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

indique que le rendu conditionnel de l'instruction if entraîne le rendu des éléments div sans conteneur englobant. Pour résoudre ce problème, il est nécessaire d'envelopper ces éléments dans une balise appropriée, telle qu'un 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>

Vous pouvez également utiliser l'API Fragments pour créer un contexte englobant sans ajouter d'éléments inutiles au DOM. :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!