Zum Inhalt springen
TextArray1.41.0
100% lokal

HTML-zu-JSX-Konverter

Wandeln Sie HTML-Markup in JSX um, das Sie direkt in eine React-Komponente einfügen können.

Eingabe
Ausgabe
Verwandte Tools
HTML-FormatiererEntwickler-Tools
CSS-zu-JS-ObjektkonverterEntwickler-Tools
HTML in BBCode umwandelnEntwickler-Tools
Markdown entfernenTextbereinigung
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
HTML-zu-JSX-Konverter
Fügen Sie HTML-Markup ein und erhalten Sie JSX, das Sie direkt in eine React-Komponente einfügen können. Der Konverter benennt jedes Attribut um, für das React einen anderen Namen erwartet – „class“ wird zu „className“, „for“ wird zu „htmlFor“, „tabindex“ wird zu „tabIndex“, „colspan“ wird zu „colSpan“ und Dutzende weitere – sodass die Konsole keine Warnungen vor unbekannten DOM-Eigenschaften mehr ausgibt, sobald Sie ein aus einem Design-Tool, einem CMS-Export, einer E-Mail-Vorlage oder einer alten statischen Seite kopiertes Snippet einfügen.
Inline-Stile sind das nächste, was React als einfache Zeichenfolge ablehnt. Aktivieren Sie „Stil in Objekt konvertieren“ und style="color:red;font-size:16px" wird zu style={{ color: 'red', fontSize: '16px' }}, mit jeder Eigenschaft in CamelCased und jedem in Anführungszeichen gesetzten Wert, bereit für die Stil-Requisite. Void-Elemente sind der dritte Haken: Mit HTML können Sie <br>, <img>, <input>, <hr> und <meta> nicht geschlossen lassen, aber JSX analysiert sie nicht, sodass „Self-close void elements“ sie für Sie in <br />, <img /> usw. umschreibt.
HTML-Kommentare werden zur einzigen Kommentarform, die JSX im Markup akzeptiert, sodass <!-- like this --> zu {/* like this */} wird. Textinhalte, Leerzeichen und Zeilenumbrüche bleiben genau so, wie Sie sie geschrieben haben, sodass Ihre Einrückung und Kopie die Konvertierung unberührt überstehen und die Attribute „data-*“ und „aria-*“ absichtlich mit Bindestrichen belassen werden, da JSX diese unverändert beibehält. Beide Optionen sind standardmäßig aktiviert und können deaktiviert werden, wenn Sie nur das Attribut umbenennen möchten.
Die gesamte Konvertierung erfolgt in Ihrem Browser als einfache String-Verarbeitung – kein DOM, kein Server, kein Upload. Fügen Sie proprietäres Markup von einem internen Admin-Panel oder einer Client-Site ein und nichts verlässt Ihr Gerät. Kopieren Sie die JSX, laden Sie sie als Datei herunter oder senden Sie sie für den nächsten Schritt an ein anderes TextArray-Tool.
Häufige Fragen
Welche Attribute werden umbenannt?
class → className, for → htmlFor und die camelCase-Formulare React erwartet: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet und viele mehr. Die Attribute „data-*“ und „aria-*“ bleiben genau so, wie sie sind, da JSX diese mit Bindestrich behält.
Konvertiert es Inline-Stile?
Ja, wenn „Stil in Objekt konvertieren“ aktiviert ist. Jede Deklaration wird zu einem CamelCased-Schlüssel mit einem in Anführungszeichen gesetzten Zeichenfolgenwert innerhalb eines Objekts im Stil einer doppelten Klammer. Deaktivieren Sie die Option, um Ihre Stilzeichenfolgen unberührt zu lassen.
Ist das ein vollständiger HTML-Parser?
Nein – es handelt sich um eine schnelle String-Transformation, nicht um ein Browser-DOM. Es deckt die Konvertierungen ab, die React tatsächlich benötigt: Attributumbenennungen, Inline-Stile, ungültige Elemente und Kommentare. Ihr HTML wird nicht neu eingerückt oder validiert, sodass fehlerhafte Tags wie geschrieben angezeigt werden.
Wird mein HTML irgendwo hochgeladen?
Nein. Die Konvertierung erfolgt vollständig in Ihrem Browser mit lokaler String-Verarbeitung. Ihr Markup erreicht nie einen Server, daher ist das Einfügen von internem oder Client-Code sicher.