Pourquoi plusieurs balises JSX doivent-elles être encapsulées ? : Encapsulation dans une autre balise ou un autre fragment

Pourquoi plusieurs balises JSX doivent-elles être encapsulées ?

JSX est une extension de syntaxe pour JavaScript. Vous pouvez écrire le formatage HTML dans un fichier JavaScript.

Lorsque vous utilisez JSX, vous savez que lorsque vous souhaitez utiliser plus d'une balise, ces balises doivent être dans un wrapper. Dans cet article, je vais vous expliquer les raisons de cette nécessité.

---

JSX est écrit en code JavaScript et compilé "en JavaScript" par des outils comme Babel pour le rendre compréhensible par le navigateur.

Écrivons maintenant un exemple JSX pour React.js :

Lorsque ce code est compilé il se transforme en ce qui suit :

Lorsque ce code est compilé, vous pouvez comprendre que la fonction React.createElement ne doit renvoyer qu'un seul élément racine en examinant le code compilé .

---

Vous savez maintenant pourquoi lorsque vous souhaitez utiliser plusieurs balises lors de l'utilisation de JSX, ces balises doivent être dans un wrapper. Alors, qu’est-ce qu’on utilise comme emballage ?
Expliquons-nous.

1. Emballage avec une balise HTML

Vous pouvez utiliser la balise div ou utiliser toute autre balise. Mais les balises div sont généralement utilisées.

Exemple :

2. Utilisation des fragments

Cette balise vide est appelée un Fragment ( <> ). Les fragments vous permettent de regrouper des éléments sans laisser de trace dans l'arborescence HTML du navigateur.

Exemple :

---

Conclusion

Vous savez maintenant pourquoi, lorsque vous souhaitez utiliser plusieurs balises lors de l'utilisation de JSX, ces balises doivent être dans un wrapper.

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!