recherche

Maison >interface Web >js tutoriel >Pourquoi est-ce que je reçois une erreur « Erreur d'analyse : les éléments JSX adjacents doivent être enveloppés dans une balise englobante » dans React ?

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-05 09:36:02451parcourir

Why am I getting a

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

Lors du rendu des composants React, il est essentiel de respecter la règle selon laquelle les éléments JSX adjacents doivent être inclus dans une balise parent. Cette erreur se produit lorsque des éléments existent côte à côte sans être encapsulés par un parent commun.

Cause de l'erreur

Le code fourni contient une instruction if qui restitue conditionnellement deux éléments div en fonction de la valeur de la variable this.state.submit. Cependant, ces éléments sont adjacents et ne sont inclus dans aucune balise parent.

Solution

Pour résoudre cette erreur, enveloppez les éléments rendus conditionnellement dans une balise englobante. Cela garantira que la structure JSX est valide. Par exemple, vous pouvez modifier le code comme suit :

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

Dans ce code modifié, nous avons entouré les éléments rendus conditionnellement dans un

étiqueter. Cela garantit que les éléments JSX adjacents ont un parent valide et que l'erreur est résolue.

API Fragments (Facultatif)

Au lieu d'utiliser une balise div supplémentaire, vous pouvez utiliser l'API Fragments . Cela vous permet de regrouper des éléments sans ajouter de nœud supplémentaire au DOM. Le code suivant montre comment utiliser des fragments :

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

Dans ce code, nous avons utilisé la méthode composant pour envelopper les éléments rendus conditionnellement. Cela permet d'obtenir le même résultat que l'utilisation d'un

balise, mais elle n'ajoute aucun nœud supplémentaire au DOM.

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!

if for Error using dom this
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
Article précédent：Gardez une longueur d'avance dans le développement Web : dernières actualités, outils et informations #57Article suivant：Gardez une longueur d'avance dans le développement Web : dernières actualités, outils et informations #57

Articles Liés

Voir plus