Maison >interface Web >js tutoriel >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 ? : Encapsulation dans une autre balise ou un autre fragment

Susan Sarandon
Susan Sarandonoriginal
2024-12-03 01:22:11774parcourir

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 :

Why Do Multiple JSX Tags Need To Be Wrapped? : Wrapping Into Another Tag or Fragment

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

Why Do Multiple JSX Tags Need To Be Wrapped? : Wrapping Into Another Tag or Fragment

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 :

Why Do Multiple JSX Tags Need To Be Wrapped? : Wrapping Into Another Tag or Fragment

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 :

Why Do Multiple JSX Tags Need To Be Wrapped? : Wrapping Into Another Tag or Fragment


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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn