Pourquoi est-ce que j'obtiens « Erreur d'analyse : les éléments JSX adjacents doivent être enveloppés dans une balise englobante » dans React ?

Erreur d'analyse : les éléments JSX adjacents doivent être enveloppés dans une balise englobante

Problème :
Lors de la tentative pour restituer conditionnellement des composants basés sur une variable, une erreur se produit : "Erreur d'analyse : les éléments JSX adjacents doivent être enveloppés dans une balise englobante."

Question :
Quelles sont les causes de cette erreur et comment peut-il être résolu ?

Réponse :
Dans React, chaque composant ou groupe de composants doit être enfermé dans une seule balise. Dans le code fourni, le rendu conditionnel fait apparaître les éléments JSX adjacents (dans ce cas, les composants input et ReactCSSTransitionGroup) sans balise englobante.

Solution :
Pour résoudre l'erreur, enveloppez ces éléments dans une balise englobante appropriée, telle qu'un

ou un React.Fragment.

Exemple :

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

Utilisation du wrapper fournit une option légère et sémantiquement neutre pour regrouper des éléments sans introduire de nœuds DOM supplémentaires.

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!

for Error using Conditional dom this input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn