Pourquoi est-ce que j'obtiens « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante ? »-js tutoriel-php.cn

Pourquoi est-ce que j'obtiens « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante ? »

Patricia Arquette

Libérer： 2024-11-02 18:07:29

original

350 Les gens l'ont consulté

Why do I get

Les éléments JSX adjacents doivent être inclus

Lorsque vous tentez de restituer conditionnellement des composants basés sur une variable d'état, il est essentiel de respecter la règle que les éléments JSX adjacents doivent être enveloppés dans une balise englobante. Cette exigence garantit la validité de l'arborescence des composants React.

Le problème survient lorsque vous utilisez une instruction if pour restituer conditionnellement des éléments sans les inclure correctement. Par exemple, dans votre code :

if(this.state.submitted==false) {
  // ...
}

Copier après la connexion

Cela entraîne l'erreur d'analyse "Les éléments JSX adjacents doivent être enveloppés dans une balise englobante." Pour résoudre ce problème, vous devez envelopper les éléments conditionnels dans une balise parent appropriée, telle qu'un

if(this.state.submitted==false) {
  return (
    <div>
      {/* Conditional content here */}
    </div>
  );
}

Copier après la connexion

Alternativement, si vous souhaitez afficher des fragments sans couche supplémentaire d'habillage, vous pouvez exploitez l'API Fragments introduite dans React 16.2 :

return (
  <>
    {/* Conditional content here */}
  </>
);

Copier après la connexion

Cette syntaxe vous permet de regrouper des éléments JSX 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!