In diesem Artikel
Warum HTML für React konvertiert werden muss
JSX sieht aus wie HTML, folgt aber den Syntaxregeln von JavaScript. React nutzt JSX, um die UI-Struktur zu beschreiben, und obwohl es HTML ähnelt, unterscheiden sich einige Attribute und Muster. Rohes HTML in eine React-Komponente einzufügen führt in der Regel zu Kompilierungsfehlern oder unerwartetem Verhalten.
Zu den häufigsten Unterschieden gehören die Attributbenennung (class wird zu className, for wird zu htmlFor), die Syntax für Inline-Stile (Strings werden zu Objekten mit camelCase-Eigenschaften), selbstschließende Tags (jedes leere Element muss selbstschließend sein) und die Benennung von Event-Handlern (onclick wird zu onClick). Ein Konverter automatisiert diese mühsamen Umwandlungen.
Was konvertiert wird
Der HTML-zu-JSX-Konverter von CheckTown übernimmt alle gängigen Umwandlungen zwischen HTML- und JSX-Syntax.
- Attribute umbenennen — class zu className, for zu htmlFor, tabindex zu tabIndex und alle anderen React-spezifischen Attributnamen
- Style-Strings parsen — Inline-style-Attribute mit CSS-Strings werden in JavaScript-Style-Objekte mit camelCase-Eigenschaftsnamen und String-Werten umgewandelt
- Selbstschließende Tags — Elemente wie <img>, <br>, <hr> und <input> werden zu <img />, <br />, <hr />, <input />
- Boolesche Attribute — checked, disabled, readonly werden in ihre JSX-Entsprechungen umgewandelt
Kostenlos testen – keine Registrierung erforderlich
HTML zu JSX konvertieren →Häufige Stolperfallen beim Konvertieren von HTML zu JSX
Selbst bei automatisierter Konvertierung gibt es Muster, die nach der ersten Umwandlung manuelle Aufmerksamkeit erfordern.
- HTML-Kommentare werden in die JSX-Kommentarsyntax umgewandelt — prüfe, ob verschachtelte Kommentare dabei nicht brechen
- SVG-Attribute wie stroke-width und fill-opacity verwenden in JSX camelCase (strokeWidth, fillOpacity) — überprüfe SVG-lastige Inhalte
- Inline-Event-Handler mit JavaScript-Strings (onclick="alert()") müssen manuell in JSX-Arrow-Function-Handler umgewandelt werden
- HTML-Entities müssen möglicherweise in Unicode-Zeichen oder JSX-Ausdrücke umgewandelt werden
Häufig gestellte Fragen
Ist die Konvertierung für jedes HTML zu 100 % genau?
Der Konverter übernimmt die Standard-Attributzuordnung von HTML zu JSX, das Parsen von Stilen und selbstschließende Tags zuverlässig. Komplexe Muster wie Inline-JavaScript-Event-Handler, eingebettete Skripte oder nicht standardmäßige Attribute können jedoch nach der Konvertierung manuelle Anpassungen erfordern.
Kann ich HTML-Templates mit dynamischen Daten konvertieren?
Der Konverter arbeitet mit statischem HTML-Markup. Template-Syntax anderer Frameworks (wie Angulars *ngFor oder Vues v-for) bleibt unverändert erhalten, funktioniert in React aber nicht. Template-Direktiven musst du manuell in JSX-Ausdrücke umwandeln.
Unterstützt der Konverter dangerouslySetInnerHTML?
Nein. Der Konverter wandelt die HTML-Struktur in eine JSX-Struktur um. Wenn du rohe HTML-Strings innerhalb von React rendern musst, würdest du dangerouslySetInnerHTML manuell einsetzen. Der Konverter ist für die strukturelle Migration gedacht, nicht für das Einfügen von HTML zur Laufzeit.