HTML til JSX-konverter
Gratis HTML til JSX-konverter online. Indsæt HTML og få ren React-JSX med det samme: className, htmlFor, camelCase-stile, selvlatkende tags og sikre kommentarer – helt i browseren.
Hvad gør HTML til JSX-konverteren?
Den omdanner almindelig HTML-markup til JSX, som React kan render. Indsæt din HTML i inputfeltet, så vises den tilsvarende JSX i outputfeltet, opdateret mens du skriver med en kort debounce.
Hvilke attributter får nye navne?
class bliver til className, for bliver til htmlFor, tabindex bliver til tabIndex, og andre attributter med bindestreger som maxlength, colspan eller stroke-width får deres camelCase-navne i React. data-* og aria-* forbliver uændrede.
Hvordan konverteres style-attributten?
En CSS-streng som style="background-color: red; font-size: 12px" bliver til et JavaScript-objekt: style={{backgroundColor:'red', fontSize:'12px'}}, hvor hver CSS-egenskab skrives i camelCase, og værdien står i anførselstegn.
Hvordan håndteres void-elementer?
Elementer, der ikke kan have børn — img, br, input, hr, meta, link og resten — normaliseres til selvlatlende syntaks: <img> bliver til <img />, præcis som JSX kræver. Tomme div'er og spans lukkes på samme måde.
Hvad sker der med HTML-kommentarer?
De bliver til JSX-kommentarer: <!-- note --> bliver til {/* note */}. Sekvenser, der ville afslutte kommentaren for tidligt, neutraliseres, så den genererede kode altid kan kompileres.
Hvordan behandles entiteter og specialtegn?
Entiteter som & eller © afkodes til rigtige tegn, derefter escapes klammer og vinkler igen i JSX-sikker form, så tekst med { } eller < vises korrekt uden at ødelægge komponenten.
Hvad gør indstillingen funktionskomponent?
Den pakker den konverterede markup ind i en klar skabelon: function Component() { return ( ...din JSX... ) } i stedet for rå JSX. Slå den til, når du vil indsætte uddraget direkte i en React-fil.
Bliver min HTML uploadet et sted?
Nej. Tolkningen sker helt i din browser med den indbyggede DOMParser. Intet sendes til nogen server, så privat markup er sikker at konvertere, og værktøjet virker også offline.
Sådan bruges HTML til JSX-konverter
Konvertér almindelig HTML til klar-til-brug React JSX uden at forlade browseren. Alt analyseres lokalt med den indbyggede DOMParser — din opmærkning uploades aldrig.
- Indsæt din HTML i venstre editor; JSX-resultatet vises til højre og opdateres, mens du skriver (300 ms debounce).
- Vælg indrykningsbredde i "Indryk" — 2 eller 4 mellemrum pr. indlejringsniveau.
- Slå "Funktionskomponent" til for at pakke outputtet ind i function Component() { return ( ... ) }, klar til at indsættes i en React-fil.
- Brug Kopiér til at tage resultatet, Eksempel til at indlæse en prøve, eller Ryd for at starte forfra.
class, for og tabindex bliver til className, htmlFor og tabIndex, style-strenge bliver til camelCase-objekter, og tomme elementer som img eller br udskrives selvafsluttende — præcis hvad JSX forventer.
Relaterede værktøjer
- HTML-forskønner Formatér og forskøn HTML-kode øjeblikkeligt. Konverter minifieret HTML til ren, læsbar kode. Gratis onlineværktøj, ingen registrering påkrævet.
- Kode til Billede Konverter kodestykker til delbare billeder med syntaksfremhævning, tilpassede temaer og vinduesdekorationer. 100% privatliv, alt i din browser.
- Hash-tjek Beregn og verificer MD5, SHA-1, SHA-256, SHA-512 filhasher lokalt
- Chmod-beregner Gratis online chmod-beregner til at visualisere og beregne Linux-filrettigheder med afkrydsningsfelter. Konverter straks mellem numerisk (755, 644) og symbolsk notation (rwxr-xr-x). Understøtter specielle rettigheder som setuid, setgid, sticky bit.
- ASCII-tabel Komplet ASCII-tegnkodningsreference med decimal-, hex-, oktal-, binærkoder, HTML-entiteter og tegnbeskrivelser. Øjeblikkelig søgning og filtrering.
- Hex-fremviser Vis filindhold i hex-dump-format med søgning, offset-navigation og virtuel rulning
- MIME-type Opslag Find MIME-typer øjeblikkeligt efter filendelse eller søg endelser efter MIME-type. Gratis online-reference med over 1000 poster.
- Skærmopløsningstjek Detekterer skærmopløsning, viewport-størrelse, DPI og farvedybde i realtid.