Ga naar inhoud
TextArray1.41.0
100% lokaal

HTML naar JSX-converter

Verander HTML-opmaak in JSX die u rechtstreeks in een React-component kunt plakken.

Invoer
Uitvoer
Gerelateerde tools
HTML-formatterOntwikkelaarstools
CSS naar JS-objectconverterOntwikkelaarstools
HTML naar BBCode-converterOntwikkelaarstools
Markdown-opmaak verwijderenTekst opschonen
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
HTML naar JSX-converter
Plak HTML-opmaak en download JSX die u rechtstreeks in een React-component kunt plaatsen. De converter hernoemt elk attribuut. React verwacht een andere naam voor - klasse wordt className, for wordt htmlFor, tabindex wordt tabIndex, colspan wordt colSpan en nog tientallen andere - dus de console stopt met waarschuwen voor onbekende DOM-eigenschappen op het moment dat je een fragment plakt dat is gekopieerd uit een ontwerptool, een CMS-export, een e-mailsjabloon of een oude statische pagina.
Inline-stijlen zijn het volgende dat React weigert als gewone string. Schakel "Stijl naar object converteren" in en style="color:red;font-size:16px" wordt style={{ color: 'red', fontSize: '16px' }}, met elke eigenschap camelCased en elke waarde geciteerd, klaar voor de stijlprop. Void-elementen zijn de derde catch: met HTML kun je <br>, <img>, <input>, <hr> en <meta> niet gesloten laten, maar JSX zal ze niet parseren, dus "Zelfsluitende void-elementen" herschrijft ze als <br />, <img /> enzovoort voor jou.
HTML-opmerkingen worden het enige reactieformulier dat JSX binnen de opmaak accepteert, dus <!-- zo --> wordt {/* zo */}. Tekstinhoud, witruimte en regeleinden blijven precies zoals u ze heeft geschreven, zodat uw inspringing en kopie de conversie onaangeroerd overleven, en data-* en aria-* attributen worden opzettelijk afgebroken omdat JSX deze behoudt zoals ze zijn. Beide opties zijn standaard ingeschakeld en kunnen worden uitgeschakeld als u alleen de naam van het attribuut wilt wijzigen.
De hele conversie gebeurt in uw browser als gewone tekenreeksverwerking: geen DOM, geen server, geen upload. Plak eigen markeringen vanuit een intern beheerderspaneel of een klantensite en niets verlaat uw apparaat. Kopieer de JSX, download deze als bestand of stuur hem door naar een andere TextArray-tool voor de volgende stap.
FAQ
Welke attributen worden hernoemd?
class → className, for → htmlFor, en de camelCase-vormen React verwacht: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet en nog veel meer. data-* en aria-* attributen blijven precies zoals ze zijn, omdat JSX deze afgebroken houdt.
Converteert het inline stijlen?
Ja, als 'Stijl naar object converteren' is ingeschakeld. Elke declaratie wordt een camelCased-sleutel met een tekenreekswaarde tussen aanhalingstekens in een object in de stijl met dubbele accolades. Schakel de optie uit om uw stijlstrings onaangeroerd te laten.
Is dit een volledige HTML-parser?
Nee – het is een snelle stringtransformatie, geen browser-DOM. Het behandelt de conversies die React daadwerkelijk nodig heeft: hernoemen van attributen, inline stijlen, ongeldige elementen en opmerkingen. Het heridentificeert of valideert uw HTML niet, waardoor verkeerd opgemaakte tags worden weergegeven zoals ze zijn geschreven.
Wordt mijn HTML ergens geüpload?
Nee. De conversie wordt volledig in uw browser uitgevoerd met lokale tekenreeksverwerking. Uw markup bereikt nooit een server, dus het plakken van interne of clientcode is veilig.