Softonic

HTML zu JSX Konverter

Schritt 1 / 2

Konvertiert: class zu className, for zu htmlFor, Inline-Stile zu JSX-Objekten, schließt leere Tags selbst und entfernt HTML-Kommentare.

In JSX umwandeln

JSX sieht aus wie HTML, bis es das nicht mehr tut, class ist className, for ist htmlFor, style ist ein Objekt und kein String, und jedes void-Tag muss sich selbst schließen. Füge HTML ein und dieser Konverter erzeugt JSX, das beim ersten Versuch kompiliert, sodass du eine Marketingseite in eine React-Komponente übertragen kannst, ohne die nächsten zehn Minuten mit Compilerfehlern zu verbringen.

Wie man HTML in JSX konvertiert

  1. 1

    HTML einfügen

    Markup für eine Komponente oder ein vollständiges Seitenfragment.

  2. 2

    Konvertieren

    Das Tool benennt Attribute wie `class`, `for` und `readonly` in die JSX-Schreibweise um und wandelt Inline-Styles in Objekte um.

  3. 3

    Das JSX überprüfen

    Die Ausgabe ist bereit, um in eine `.jsx` oder `.tsx` Datei eingefügt zu werden.

  4. 4

    Kopieren und einfügen

    Der Code verwendet einzeilige Ausdrücke, sodass er gut in eine bestehende Komponente passt.

Jeder HTML-zu-JSX-Unterschied, der zählt

JSX ist kein HTML. Es ist ein JavaScript-Ausdruck, der in React.createElement()-Aufrufe kompiliert wird, sodass Attributnamen den JavaScript-Konventionen folgen.

Der Konverter übernimmt die häufigsten Umbenennungen automatisch. Die vollständige Liste unten ist die Referenz, die du beim manuellen Schreiben von JSX brauchst.

Attributumbenennungen

HTML JSX Anmerkungen
class className class ist in JS reserviert
for htmlFor for ist reserviert
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Doppelpunkte-Namensräume abgeflacht
aria-label aria-label ARIA behält Bindestriche
data-* data-* Datenattribute behalten Bindestriche

Stilattribut

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Numerische Werte ohne Einheiten werden zu Pixeln; Strings für Prozentsätze und einheitenlose Werte wie flex bleiben erhalten.

Selbstschließende void-Elemente

HTML toleriert <br> und <input> ohne schließendes Tag. JSX erfordert <br /> und <input />, jedes Element muss explizit geschlossen werden.

Kommentare

HTML-Kommentare (<!-- -->) sind in JSX-Körpern nicht gültig. Dieser Konverter entfernt sie; wenn du eine Notiz behalten möchtest, schreibe sie selbst als {/* JavaScript-Blockkommentar */}.

Boolesche Attribute

HTML: <input checked> (oder <input checked="checked">)

JSX: <input checked={true} /> oder einfach <input checked />. Niemals einen String “true” übergeben.

Escape-Hatches

  • Untrusted HTML-Schnipsel können mit dangerouslySetInnerHTML={{ __html: ... }} gerendert werden, absichtlich hässlich, um die Verwendung abzuschrecken.
  • Benutzerdefinierte data-* Attribute bleiben unverändert; nicht standardisierte Attribute werden durchgereicht, können jedoch in der Entwicklungsumgebung React-Warnungen auslösen.

Häufig gestellte Fragen

SVG-Attribute wie stroke-width müssen in JSX in camelCase (strokeWidth) geschrieben werden, und jedes Tag muss sich selbst schließen. Der Konverter schließt void-Tags innerhalb von SVG selbst und schreibt Eigenschaftsnamen in Style-Strings in camelCase, benennt aber keine SVG-Attribute um; ändere stroke-width von Hand zu strokeWidth. Für einmalige Icons ist der sauberste Ansatz, sie als SVG-Datei zu speichern und über svgr als Komponente zu importieren.

Ja, sowohl JSX als auch TSX verwenden className. Die einzige Ausnahme ist innerhalb von dangerouslySetInnerHTML, wo der rohe HTML-String class behält, da er unverändert in das DOM eingefügt wird.

Nein. Die Ausgabe ist nur das JSX-Fragment, ohne export default function-Wrapper und ohne Typannotationen. Füge es in deine .jsx- oder .tsx-Datei ein und ergänze Props, Typen und Wrapper selbst. class wird weiterhin in className umgewandelt, genau das erwartet TSX.

Sie werden unverändert durchgereicht. Der Konverter benennt keine Ereignishandler um; ändere onclick zu onClick und ersetze den String durch eine echte Funktion, zum Beispiel onClick={() => doThing()}. Die Funktion doThing musst du im Geltungsbereich deiner Komponente definieren.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

Tool in anderen Sprachen verfügbar