Comment puis-je résoudre « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante » dans React.js ?

Erreur d'analyse : résolution de « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante »

Lors d'une tentative de rendu conditionnel de composants dans une application React.js, les développeurs peuvent rencontrer l'erreur "Erreur d'analyse : les éléments JSX adjacents doivent être enveloppés dans une balise englobante." Cela se produit lorsque plusieurs éléments JSX sont placés directement les uns à côté des autres sans être contenus dans un composant parent.

L'erreur peut être corrigée en garantissant que tous les éléments JSX sont enfermés dans un seul composant parent, comme indiqué ci-dessous :

// Incorrect: Adjacent JSX elements will result in a parse error
return (
  <Comp1 />
  <Comp2 />
);

// Correct: Enclose elements within a parent component
return (
  <div>
    <Comp1 />
    <Comp2 />
  </div>
);

Alternativement, l'API React.Fragment peut être utilisée pour créer un composant parent virtuel sans ajouter de nœuds DOM supplémentaires :

// Fragments allow for grouping JSX elements without adding nodes to DOM
return (
  <React.Fragment>
    <Comp1 />
    <Comp2 />
  </React.Fragment>
);

Par En enfermant les éléments JSX adjacents dans un composant parent approprié, les développeurs peuvent résoudre l'erreur « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante » et s'assurer que leurs applications React s'affichent comme prévu.

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!