Preskoči na sadržaj
TextArray1.41.0
100% lokalno

Konverter HTML u JSX

Pretvorite HTML oznake u JSX koje možete zalijepiti ravno u React komponentu.

Unos
Rezultat
Slični alati
HTML formaterAlati za programere
Konverter CSS u JS objekteAlati za programere
Konverter HTML-a u BBCodeAlati za programere
Strip MarkdownČišćenje teksta
i18n tipka difAlati za programere
Konverter iz TOML u JSONAlati za programere
Konverter HTML u JSX
Zalijepite HTML oznake i nabavite JSX koji možete ispustiti ravno u React komponentu. Konverter preimenuje svaki atribut. React očekuje različito ime za — class postaje className, for postaje htmlFor, tabindex postaje tabIndex, colspan postaje colSpan i još desetke — tako da konzola prestaje upozoravati o nepoznatim svojstvima DOM-a u trenutku kada zalijepite isječak kopiran iz alata za dizajn, CMS izvoza, predloška e-pošte ili stare statične stranice.
Inline stilovi su sljedeća stvar koju React odbija kao običan string. Uključite "Pretvori stil u objekt" i style="color:red;font-size:16px" postaje style={{ color: 'red', fontSize: '16px' }}, sa svakim svojstvom camelCased i svakom citiranom vrijednošću, spremnim za stilsku podršku. Void elementi su treća začkoljica: HTML vam dopušta da ostavite <br>, <img>, <input>, <hr> i <meta> nezatvorene, ali JSX ih neće analizirati, pa ih "Samozatvori void elemente" prepisuje kao <br />, <img /> i tako dalje umjesto vas.
HTML komentari pretvaraju se u jedini oblik komentara koji JSX prihvaća unutar označavanja, tako da <!-- ovako --> postaje {/* ovako */}. Tekstualni sadržaj, razmaci i prijelomi redaka ostaju točno onakvi kakvima ste ih napisali, tako da vaša uvlaka i kopija prežive pretvorbu netaknuti, a data-* i aria-* atributi su namjerno ostavljeni sa crticom jer ih JSX zadržava onakvima kakvi jesu. Obje su opcije uključene prema zadanim postavkama i mogu se isključiti kada želite samo preimenovanje atributa.
Cijela pretvorba događa se u vašem pregledniku kao obična obrada niza — bez DOM-a, bez poslužitelja, bez prijenosa. Zalijepite vlasničke oznake s interne administratorske ploče ili klijentske stranice i ništa neće napustiti vaš uređaj. Kopirajte JSX, preuzmite ga kao datoteku ili ga pošaljite drugom TextArray alatu za sljedeći korak.
FAQ
Koje atribute preimenuje?
class → className, for → htmlFor i oblici camelCase React očekuje: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet i mnoge druge. atributi data-* i aria-* ostavljeni su točno onakvi kakvi jesu jer ih JSX drži označene crticom.
Pretvara li ugrađene stilove?
Da, kada je uključeno "Pretvori stil u objekt". Svaka deklaracija postaje ključ u obliku kamilice s vrijednošću niza u navodnicima unutar objekta u stilu dvostrukih zagrada. Isključite opciju kako biste ostavili svoje stilske nizove netaknutima.
Je li ovo potpuni HTML parser?
Ne — to je brza transformacija niza, a ne DOM preglednika. Pokriva konverzije koje React zapravo treba: preimenovanja atributa, ugrađene stilove, void elemente i komentare. Ne uvlači i ne provjerava valjanost vašeg HTML-a, tako da krivo oblikovane oznake dolaze kao što su napisane.
Je li moj HTML igdje učitan?
Ne. Konverzija se u potpunosti izvodi u vašem pregledniku s lokalnom obradom niza. Vaše oznake nikada ne dopiru do poslužitelja, pa je lijepljenje internog ili klijentskog koda sigurno.