Softonic

HTML till JSX-omvandlare

Steg 1 / 2

Konverterar: class till className, for till htmlFor, inline-stilar till JSX-objekt, självstänger tomma taggar, tar bort HTML-kommentarer.

Konvertera till JSX

JSX ser ut som HTML tills det inte gör det: class är className, for är htmlFor, style är ett objekt och inte en sträng, och varje void-tagg måste självstängas. Klistra in HTML så producerar den här omvandlaren JSX som kompilerar på första försöket, så att du kan lyfta en marknadsföringssida in i en React-komponent utan att tillbringa de närmaste tio minuterna med att jaga kompilatorfel.

Så omvandlar du HTML till JSX

  1. 1

    Klistra in HTML

    Markup för en komponent eller ett komplett sidfragment.

  2. 2

    Omvandla

    Verktyget byter namn på attribut som `class`, `for` och `readonly` till JSX-skrivsätt och omvandlar inline-stilar till objekt.

  3. 3

    Granska JSX

    Resultatet är redo att klistras in i en `.jsx`- eller `.tsx`-fil.

  4. 4

    Kopiera och klistra in

    Koden använder enradsuttryck och passar därför bra in i en befintlig komponent.

Varje HTML-till-JSX-skillnad som spelar roll

JSX är inte HTML. Det är ett JavaScript-uttryck som kompileras till React.createElement()-anrop, så attributnamn följer JavaScript-konventionerna.

Omvandlaren utför de vanligaste namnbytena automatiskt. Hela listan nedan är referensen du behöver när du skriver JSX för hand.

Attributnamnbyten

HTML JSX Anmärkningar
class className class är reserverat i JS
for htmlFor for är reserverat
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Kolonn-namnrymder plattas ut
aria-label aria-label ARIA behåller bindestreck
data-* data-* Dataattribut behåller bindestreck

Style-attributet

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

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

Numeriska värden utan enheter blir pixlar; behåll strängar för procenttal och enhetslösa värden som flex.

Självstängande void-element

HTML tolererar <br> och <input> utan sluttagg. JSX kräver <br /> och <input />, varje element måste stängas explicit.

Kommentarer

HTML-kommentarer (<!-- -->) är inte giltiga i JSX-kroppar. Den här omvandlaren tar bort dem; om du vill behålla en notering skriver du den själv som {/* JavaScript-blockkommentar */}.

Booleska attribut

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

JSX: <input checked={true} /> eller helt enkelt <input checked />. Skicka aldrig strängen “true”.

Utvägar

  • Opålitliga HTML-fragment kan renderas med dangerouslySetInnerHTML={{ __html: ... }}, medvetet fult för att avskräcka från användning.
  • Anpassade data-*-attribut förblir oförändrade; icke-standardiserade attribut skickas vidare men kan utlösa React-varningar i utvecklingsläge.

Vanliga frågor

SVG-attribut som stroke-width måste skrivas i camelCase (strokeWidth) i JSX och varje tagg måste självstängas. Omvandlaren självstänger void-taggar i SVG och omvandlar egenskapsnamn i stilsträngar till camelCase, men byter inte namn på SVG-attribut; ändra stroke-width till strokeWidth för hand. För engångsikoner är det renaste sättet att spara ikonen som SVG-fil och importera den som komponent via svgr.

Ja, både JSX och TSX använder className. Det enda undantaget är inuti dangerouslySetInnerHTML, där den råa HTML-strängen behåller class eftersom den infogas oförändrad i DOM.

Nej. Utdata är bara JSX-fragmentet, utan export default function-wrapper och utan typannoteringar. Klistra in det i din .jsx- eller .tsx-fil och lägg till props, typer och wrapper själv. class konverteras fortfarande till className, vilket är exakt vad TSX förväntar sig.

De skickas vidare oförändrade. Omvandlaren byter inte namn på händelsehanterare, så ändra onclick till onClick och ersätt strängvärdet med en riktig funktion, till exempel onClick={() => doThing()}. Du måste definiera doThing i komponentens omfång.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

E-postvalidator

Validera en e-postadress: RFC 5322-syntaxkontroll, live-slagning av MX-poster samt detaljer om lokal del, domän och längd. Ingen e-post skickas.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Verktyget finns på andra språk