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

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

YAML till JSON

Omvandla YAML-konfiguration till JSON för verktyg och API:er som bara accepterar JSON. Hanterar ankare, merge-nycklar och nästlade strukturer.

XML-formaterare

Snygga till XML-dokument med konsekvent indrag och fånga formfel med exakta radnummer.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Verktyget finns på andra språk