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
Libérer: 2024-12-03 01:22:11
original
671 Les gens l'ont consulté

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!

source:dev.to
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal