Eingabe
Dein Arbeitsbereich wird vorbereitet…
Anleitung
- HTML-Fragment einfügen, UTF-8-Datei öffnen oder Beispiel laden.
- Einrückung wählen und In JSX konvertieren auswählen.
- Markup prüfen und kopieren oder herunterladen.
HTML-Markup in React übernehmen
HTML aus einer Vorlage benötigt für JSX oft Anpassungen: className, htmlFor, selbstschließende Elemente und anders aufgebaute Inline-Stile.
Der Konverter bearbeitet die Markup-Struktur. Komponentenstatus, Event-Callbacks und Anwendungslogik ergänzt du am späteren Einsatzort selbst.
Attribute und Stile umwandeln
HTML-Attribute werden auf React-Formen wie className und htmlFor abgebildet. Gängige SVG-Namen erhalten React-Schreibweise.
Inline-CSS wird zum style-Objekt und als JSX formatiert. Text wird bei Bedarf maskiert und nicht als JavaScript-Ausdruck interpretiert.
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>Verkürztes Beispiel der Attributumwandlung. Die vollständige Ausgabe ist formatiert und hat einen Fragment-Wrapper.
Struktur und Verhalten
Das HTML-Fragment wird vor der Umwandlung geparst. Die Ausgabe nutzt einen Fragment-Wrapper und passende selbstschließende Syntax.
Script-Elemente und Inline-Eventattribute werden entfernt. Daraus entstehen keine React-Callbacks; verbleibende URLs und Stile sind dadurch nicht automatisch für deine Anwendung geeignet.
Das Ergebnis integrieren
Füge das JSX in render oder einen return-Ausdruck ein. Ergänze Verhalten manuell und prüfe Stile, besonders wiederholte Fallbacks und !important, die ein style-Objekt nicht vollständig darstellt.
Texteingabe bis 1 MiB. CSS- und HTML-Umwandlungen laufen in einem Worker mit einem Zeitlimit von 30 Sekunden. Farbtools verwenden sRGB; generierte Styles sind Vorschauen und müssen im eigenen Layout getestet werden.
Häufige Fragen
Entsteht eine vollständige React-Komponente?
Nein. Die Ausgabe ist JSX-Markup. Ergänze Komponente, Imports, Daten und Verhalten im Projekt.
Was geschieht mit Scripts und onclick?
Script-Elemente und Inline-Events werden entfernt. Ihr Code wird weder ausgeführt noch in React-Handler übersetzt.
Warum bleiben geschweifte Klammern Text?
Die Eingabe wird als HTML gelesen. Literale Klammern werden für JSX maskiert, nicht als Ausdrücke ausgewertet.
Werden Inline-Stile exakt übernommen?
Gängige Deklarationen werden zu React-Style-Eigenschaften. Wiederholte Fallbacks und !important sind im JavaScript-Objekt nicht immer originalgetreu darstellbar.
Kann ich SVG-Markup konvertieren?
Gängige SVG-Attribute werden auf React-Namen abgebildet. Teste IDs, Referenzen und anwendungsspezifische Attribute im Ziel.