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.
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.
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
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 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
