HTML in React-JSX umwandeln
Wandelt HTML-Markup mit htmltojsx in React-JSX um: class wird zu className, for zu htmlFor, Inline-Styles werden zu Style-Objekten und leere Tags werden selbstschließend. Mehrere Root-Elemente werden in ein Fragment gehüllt.
Ein statisches HTML-Template oder Formular in eine React-Komponente überführen.
HTML
JSX
Wann sie hilft
- Ein statisches HTML-Template oder Formular in eine React-Komponente überführen.
- Ein Markup-Snippet aus einer Dokumentation oder einem UI-Kit in JSX umwandeln, das du in eine Komponente einfügen kannst.
Anwendung
- Füge HTML in den linken Editor ein.
- Öffne optional die Einstellungen und aktiviere "Create function component", um die Ausgabe in export const Foo = () => (...) zu hüllen.
- Kopiere das JSX, benenne die Komponente um und ersetze Inline-Event-Attribute durch React-Handler.
HTML
<label class="field" for="email">Email</label> <input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled> <!-- hint -->
JSX
<>
<label className="field" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
tabIndex={1}
style={{ marginTop: 4, fontSize: 14 }}
disabled=""
/>
{/* hint */}
</>Details und Einschränkungen
Die Umwandlung läuft im Browser, und die Ausgabe wird mit Prettier formatiert (ohne Semikolons).
Inline-Event-Attribute wie onclick="go()" bleiben unverändert und werden nicht in onClick-Handler umgewandelt.
Boolesche Attribute erhalten einen leeren String, z. B. disabled="". React behandelt "" als false, also ändere es zu disabled oder disabled={true}.
Ist die Eingabe SVG, zeigt die Seite einen Hinweis auf SVG to JSX an.
FAQ
Wie werden Inline-Styles umgewandelt?
Der Style-String wird in ein Objekt mit camelCase-Schlüsseln geparst, und Pixelwerte werden zu Zahlen: style="margin-top: 4px" wird zu style={{ marginTop: 4 }}.
Was passiert mit HTML-Kommentaren?
Sie bleiben als JSX-Kommentare erhalten, z. B. wird <!-- hint --> zu {/* hint */}.
Kann ich der erzeugten Komponente einen Namen geben?
Nein. Die Funktionsoption verwendet immer den Namen Foo. Benenne sie nach dem Kopieren um.