Preskoči na vsebino
TextArray1.41.0
100% lokalno

Pretvornik HTML v JSX

Spremenite oznako HTML v JSX, ki jo lahko prilepite neposredno v komponento React.

Vhod
Izhod
Povezana orodja
Oblikovalnik HTMLOrodja za razvijalce
Pretvornik predmetov CSS v JSOrodja za razvijalce
Pretvornik HTML v BBCodeOrodja za razvijalce
Strip MarkdownČiščenje besedila
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
Pretvornik HTML v JSX
Prilepite oznako HTML in pridobite JSX, ki ga lahko spustite neposredno v komponento React. Pretvornik preimenuje vsak atribut. React pričakuje drugačno ime za — class postane className, for postane htmlFor, tabindex postane tabIndex, colspan postane colSpan in na desetine drugih — tako da konzola preneha opozarjati na neznane lastnosti DOM v trenutku, ko prilepite delček, kopiran iz orodja za oblikovanje, izvoza CMS, e-poštne predloge ali stare statične strani.
Slogi v vrstici so naslednja stvar, ki jo React zavrne kot navaden niz. Vklopite »Pretvori slog v objekt« in style="color:red;font-size:16px" postane style={{ color: 'red', fontSize: '16px' }}, z vsako lastnostjo CamelCased in vsako navedeno vrednostjo, pripravljeno za slogovno podlago. Prazni elementi so tretji ulov: HTML vam omogoča, da pustite <br>, <img>, <input>, <hr> in <meta> nezaprte, vendar jih JSX ne bo razčlenil, zato jih "Samozapiranje praznih elementov" prepiše namesto vas kot <br />, <img /> in tako naprej.
Komentarji HTML se spremenijo v edino obliko komentarjev, ki jo JSX sprejme znotraj označevanja, tako da <!-- kot to --> postane {/* kot to */}. Besedilna vsebina, presledki in prelomi vrstic ostanejo natanko takšni, kot ste jih napisali, tako da vaš zamik in kopija preživita pretvorbo nedotaknjena, atributa data-* in aria-* pa namerno pustita vezaje, ker jih JSX ohrani takšne, kot so. Obe možnosti sta privzeto vklopljeni in ju lahko izklopite, ko želite samo preimenovanje atributov.
Celotna pretvorba se zgodi v vašem brskalniku kot obdelava navadnega niza – brez DOM, brez strežnika, brez nalaganja. Prilepite lastniško oznako iz notranje skrbniške plošče ali odjemalskega mesta in nič ne bo zapustilo vaše naprave. Kopirajte JSX, ga prenesite kot datoteko ali ga pošljite drugemu orodju TextArray za naslednji korak.
FAQ
Katere atribute preimenuje?
class → className, for → htmlFor in oblike camelCase React pričakuje: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet in še veliko več. atributa data-* in aria-* ostaneta natanko takšna, kot sta, ker jih JSX ohranja označene z vezaji.
Ali pretvori vstavljene sloge?
Da, ko je vklopljena možnost »Pretvori slog v objekt«. Vsaka deklaracija postane ključ v kamelji črki z vrednostjo niza v narekovajih znotraj predmeta v slogu z dvojnimi oklepaji. Izklopite možnost, da pustite nize sloga nedotaknjene.
Je to popoln razčlenjevalnik HTML?
Ne — to je hitro preoblikovanje niza, ne DOM brskalnika. Zajema pretvorbe, ki jih React dejansko potrebuje: preimenovanja atributov, vgrajene sloge, prazne elemente in komentarje. Vašega HTML-ja ne zamakne ali potrdi, zato se napačno oblikovane oznake prikažejo, kot so zapisane.
Ali je moj HTML kje naložen?
Ne. Pretvorba poteka v celoti v vašem brskalniku z lokalno obdelavo nizov. Vaša oznaka nikoli ne doseže strežnika, zato je lepljenje notranje kode ali kode odjemalca varno.