HTML–JSX átalakító
Ingyenes online HTML–JSX átalakító. Illeszd be a HTML-t, és azonnal tiszta React-JSX-et kapsz: className, htmlFor, camelCase stílusok, önzáró címkék és biztonságos megjegyzések, teljesen a böngészőben.
Mit csinál a HTML–JSX átalakító?
A közönséges HTML-jelölést React által renderelhető JSX-sé alakítja. Illeszd be a HTML-t a beviteli mezőbe, és a megfelelő JSX megjelenik a kimeneti panelen, rövid késleltetéssel frissülve gépelés közben.
Mely attribútumok kapnak új nevet?
A class className lesz, a for htmlFor, a tabIndex a tabIndex, a többi kötőjeles attribútum pedig – mint a maxlength, colspan vagy stroke-width – a React camelCase nevére változik. A data-* és aria-* attribútumok változatlanok maradnak.
Hogyan alakul át a style attribútum?
A style="background-color: red; font-size: 12px" jellegű CSS-karakterlánc JavaScript-objektummá alakul: style={{backgroundColor:'red', fontSize:'12px'}}, ahol minden CSS-tulajdonság camelCase írásmódot kap, az érték pedig idézőjelbe kerül.
Hogyan kezeli az eszköz a void elemeket?
Azok az elemek, amelyek nem lehetnek gyerekük — img, br, input, hr, meta, link és a többi — önzáró szintaxisra normalizálódnak: az <img> <img /> lesz, pontosan ahogy a JSX megköveteli. Az üres divek és spanok ugyanígy záródnak.
Mi történik a HTML-megjegyzésekkel?
JSX-megjegyzésekké alakulnak: <!-- megjegyzés --> lesz belőle {/* megjegyzés */}. Minden olyan szekvencia, amely idő előtt lezárná a megjegyzést, semlegesítésre kerül, így a generált kód mindig fordítható.
Hogyan kezeli az entitásokat és speciális karaktereket?
Az & vagy © jellegű entitások valódi karakterekké dekódolódnak, majd a kapcsos és csúcsos zárójelek JSX-biztos formában újra escape-elődnek, így a { } vagy < jeleket tartalmazó szöveg helyesen jelenik meg a komponens eltörése nélkül.
Mire jó a függvénykomponens opció?
Az átalakított jelölést kész sablonba csomagolja: function Component() { return ( ...a JSX-ed... ) } a csupasz JSX helyett. Kapcsold be, ha a kódrészletet egyből React-fájlba szeretnéd illeszteni.
Feltöltésre kerül a HTML-em?
Nem. A feldolgozás teljesen a böngésződben fut a beépített DOMParserrel. Semmi nem kerül szerverre, így privát jelölést is biztonságosan konvertálhatsz, és az eszköz offline is működik.
A(z) HTML–JSX átalakító használata
Alakítsa át a közönséges HTML-t azonnal használható React JSX-lé anélkül, hogy elhagyná a böngészőt. Minden helyben, a beépített DOMParserrel elemződik — a jelölése sosem kerül feltöltésre.
- Illessze be a HTML-jét a bal oldali szerkesztőbe; a JSX-eredmény jobbra jelenik meg, és gépelés közben frissül (300 ms késleltetés).
- Válassza ki a behúzás szélességét az „Behúzás” mezőben — szintenként 2 vagy 4 szóköz.
- Kapcsolja be a „Függvénykomponens” kapcsolót, hogy a kimenet function Component() { return ( ... ) } formába csomagolódjon, amelyet közvetlenül beilleszthet egy React-fájlba.
- Az eredmény kiemeléséhez használja a Másolás gombot, minta betöltéséhez a Példát, újrakezdéshez a Törlést.
A class, for és tabindex átváltozik className, htmlFor és tabIndex értékekké, a style sztringek camelCase objektummá válnak, az img vagy br jellegű void elemek pedig önzáró formában kerülnek kiadásra — pontosan azt kapja, amire a JSX számít.
Kapcsolódó eszközök
- HTML szépítő HTML kód azonnali formázása és szépítése. Alakítsa át a minimalizált HTML-t tiszta, olvasható kóddá. Ingyenes online eszköz, regisztráció nélkül.
- Kód Képpé Kódrészletek megosztott képekké alakítása szintaxiskiemeléssel, egyéni témákkal és ablakdekorációkkal. 100% adatvédelem, minden a böngészőjében.
- Hash-ellenőrző MD5, SHA-1, SHA-256, SHA-512 fájl hash-ek helyi kiszámítása és ellenőrzése
- Chmod-számológép Ingyenes online chmod-számológép a Linux fájljogosultságok vizualizálásához és számításához jelölőnégyzetekkel. Azonnali átváltás numerikus (755, 644) és szimbolikus jelölés (rwxr-xr-x) között. Támogatja a különleges jogosultságokat mint setuid, setgid, sticky bit.
- ASCII Táblázat Teljes ASCII karakterkódolási referencia tizes, tizenhatos, nyolcas, kettes számrendszerbeli kódokkal, HTML entitásokkal és karakterleírásokkal. Azonnali keresés és szűrés.
- Hex megjelenítő Fájltartalom megtekintése hex dump formátumban kereséssel, offset navigációval és virtuális görgetéssel
- MIME Típus Kereső Azonnal találjon MIME típusokat fájlkiterjesztés alapján, vagy keressen kiterjesztéseket MIME típus szerint. Ingyenes online referencia 1000+ bejegyzéssel.
- Képernyőfelbontás-ellenőrző Valós időben észleli a képernyőfelbontást, viewport méretet, DPI-t és színmélységet.