` rend le HTML invalide.
La solution : React Fragments
Pour résoudre ce problème, React introduit le concept de Fragments. Les Fragments vous permettent de grouper une liste d'éléments enfants sans ajouter de noeud supplémentaire au DOM réel. Ils agissent comme un wrapper invisible uniquement pour la logique de React et de JSX.
Il existe deux syntaxes pour déclarer des Fragments.
Syntaxe longue : ``
La syntaxe explicite utilise le composant `React.Fragment`:
import React from 'react'; // Import nécessaire si React n'est pas global
function ColonnesTableauAvecFragmentLong() {
return (
| Donnée 1 |
Donnée 2 |
);
}
// DOM Résultant (VALIDE cette fois) :
//
//
//
//
// | Donnée 1 |
// Donnée 2 |
//
//
//
Cette syntaxe est claire et explicite. Son principal avantage est qu'elle est la seule des deux syntaxes à pouvoir accepter des attributs, notamment l'attribut `key`, ce qui est indispensable lors du rendu de listes de fragments (voir plus loin).
Syntaxe courte : `<>`
Il existe une syntaxe plus courte et plus courante pour les Fragments, qui ressemble à des balises vides :
function ColonnesTableauAvecFragmentCourt() {
return (
<>
| Donnée 1 |
Donnée 2 |
<>
);
}
// Le résultat dans le DOM est identique à la version longue.
Cette syntaxe est plus légère et très populaire. Cependant, elle présente une limitation importante : vous ne pouvez pas lui passer d'attributs, y compris l'attribut `key`.
Quand utiliser quelle syntaxe ? Le cas de l'attribut `key`
Pour la majorité des cas où vous avez simplement besoin de grouper des éléments adjacents, la syntaxe courte `<>` est suffisante et préférable pour sa concision.
Vous devrez utiliser la syntaxe longue `` principalement dans un cas spécifique : lorsque vous mappez un tableau pour générer une liste de groupes d'éléments, et que React a besoin d'une `key` unique pour chaque groupe (fragment) afin d'optimiser les mises à jour. L'attribut `key` est la seule prop que `React.Fragment` peut accepter.
function ListeDefinition({ items }) {
return (
{items.map(item => (
// Ici, chaque groupe de dt/dd doit avoir une clé unique.
// La syntaxe courte <> ne peut pas recevoir de clé.
// On utilise donc React.Fragment avec une clé.
- {item.terme}
- {item.definition}
))}
);
}
const mesItems = [
{ id: 1, terme: 'React', definition: 'Bibliothèque UI' },
{ id: 2, terme: 'JSX', definition: 'Extension de syntaxe' }
];
Conclusion : Garder un DOM propre avec les Fragments
Les Fragments (`` ou `<>`) sont un outil essentiel dans React pour résoudre l'obligation d'avoir un élément racine unique en JSX sans introduire de noeuds DOM superflus. Ils permettent de garder une structure HTML propre et valide, tout en facilitant la mise en page CSS.
Privilégiez la syntaxe courte `<>` pour sa simplicité dans la plupart des cas, et réservez la syntaxe longue `` aux situations (principalement les listes) où vous avez besoin de fournir une prop `key` unique à chaque fragment généré.
