Aller au contenu
TextArray1.41.0
Tout en local

Convertisseur HTML en JSX

Transformez le balisage HTML en JSX que vous pouvez coller directement dans un composant React.

Entrée
Sortie
Outils connexes
Formateur HTMLOutils de développement
Convertisseur d'objets CSS en JSOutils de développement
Convertisseur HTML en BBCodeOutils de développement
Supprimer le formatage MarkdownNettoyage du texte
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
Convertisseur HTML en JSX
Collez le balisage HTML et obtenez JSX que vous pouvez déposer directement dans un composant React. Le convertisseur renomme chaque attribut pour lequel React attend un nom différent - class devient className, for devient htmlFor, tabindex devient tabIndex, colspan devient colSpan et des dizaines d'autres - de sorte que la console cesse d'avertir des propriétés DOM inconnues au moment où vous collez un extrait copié à partir d'un outil de conception, d'une exportation CMS, d'un modèle de courrier électronique ou d'une ancienne page statique.
Les styles en ligne sont la prochaine chose que React refuse en tant que chaîne simple. Activez "Convertir le style en objet" et style="color:red;font-size:16px" devient style={{ color: 'red', fontSize: '16px' }}, avec chaque propriété camelCased et chaque valeur citée, prête pour l'accessoire de style. Les éléments vides sont le troisième problème : HTML vous permet de laisser <br>, <img>, <input>, <hr> et <meta> non fermés, mais JSX ne les analysera pas, donc "Éléments vides à fermeture automatique" les réécrit comme <br />, <img /> et ainsi de suite pour vous.
Les commentaires HTML deviennent le seul formulaire de commentaire accepté par JSX dans le balisage, donc <!-- like this --> devient {/* like this */}. Le contenu du texte, les espaces et les sauts de ligne restent exactement tels que vous les avez écrits, de sorte que votre indentation et votre copie survivent à la conversion intactes, et les attributs data-* et aria-* sont délibérément laissés avec un trait d'union car JSX les conserve tels quels. Les deux options sont activées par défaut et peuvent être désactivées lorsque vous souhaitez uniquement renommer l'attribut.
L'ensemble de la conversion s'effectue dans votre navigateur sous forme de traitement de chaîne simple : pas de DOM, pas de serveur, pas de téléchargement. Collez le balisage propriétaire à partir d’un panneau d’administration interne ou d’un site client et rien ne quitte votre appareil. Copiez le JSX, téléchargez-le sous forme de fichier ou envoyez-le à un autre outil TextArray pour l'étape suivante.
FAQ
Quels attributs renomme-t-il ?
class → className, for → htmlFor et les formulaires camelCase que React attend : tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet et bien d'autres. Les attributs data-* et aria-* sont laissés exactement tels qu'ils sont, car JSX les conserve avec un trait d'union.
Est-ce qu'il convertit les styles en ligne ?
Oui, lorsque « Convertir le style en objet » est activé. Chaque déclaration devient une clé camelCased avec une valeur de chaîne entre guillemets à l'intérieur d'un objet de style double accolade. Désactivez l’option pour laisser vos chaînes de style intactes.
Est-ce un analyseur HTML complet ?
Non, il s'agit d'une transformation de chaîne rapide, pas d'un DOM de navigateur. Il couvre les conversions dont React a réellement besoin : renommage des attributs, styles en ligne, éléments vides et commentaires. Il ne réindente ni ne valide votre HTML, donc les balises mal formées apparaissent telles qu'elles sont écrites.
Mon code HTML est-il téléchargé quelque part ?
Non. La conversion s'exécute entièrement dans votre navigateur avec un traitement de chaîne local. Votre balisage n'atteint jamais un serveur, donc coller du code interne ou client est sûr.