Ugrás a tartalomhoz
TextArray1.41.0
100% helyi

HTML-JSX konverter

Változtassa a HTML-jelölést JSX-be, amelyet közvetlenül beilleszthet egy React összetevőbe.

Bemenet
Kimenet
Kapcsolódó eszközök
HTML-formázóFejlesztői eszközök
CSS-JS objektum konverterFejlesztői eszközök
HTML átalakítása BBCode-raFejlesztői eszközök
Markdown eltávolításaSzövegtisztítás
i18n kulcs diffFejlesztői eszközök
TOML-JSON konverterFejlesztői eszközök
HTML-JSX konverter
Illessze be a HTML-jelölést, és szerezze be a JSX-et, amelyet közvetlenül a React összetevőbe dobhat. A konverter minden attribútumot átnevez, a React más nevet vár: az osztályból className, a forból htmlFor, a tabindexből tabIndex, a colspanból colSpan lesz, és még több tucat – így a konzol nem figyelmeztet az ismeretlen DOM-tulajdonságokra, amint beilleszt egy tervezőeszközből, CMS-exportálásból, e-mail sablonból vagy egy régi statikus oldalból másolt részletet.
A soron belüli stílusok a következő, amit a React visszautasít egyszerű karakterláncként. Kapcsolja be a "Stílus konvertálása objektummá" funkciót, és a style="color:red;font-size:16px" a következőre módosul: style={{ color: 'red', fontSize: '16px' }}, minden camelCased tulajdonsággal és minden idézett értékkel, készen áll a stílus kellékeihez. Az üres elemek a harmadik fogás: a HTML lehetővé teszi a <br>, <img>, <input>, <hr> és <meta> záratlan hagyását, de a JSX nem fogja ezeket elemezni, így az „Önbezáró üres elemek” átírja őket a következőre: <br />, <img /> és így tovább.
A HTML-megjegyzések az egyetlen megjegyzésforma, amelyet a JSX elfogad a jelölésen belül, így a <!-- like this --> a következővé válik {/*, mint ez */}. A szövegtartalom, a szóközök és a sortörések pontosan úgy maradnak, ahogy írtad, így a behúzás és a másolat érintetlenül éli túl az átalakítást, a data-* és aria-* attribútumok pedig szándékosan kötőjellel vannak elválasztva, mert a JSX azokat úgy tartja, ahogy vannak. Mindkét lehetőség alapértelmezés szerint be van kapcsolva, és kikapcsolható, ha csak az attribútumokat szeretné átnevezni.
A teljes átalakítás a böngészőben egyszerű karakterlánc-feldolgozásként történik – nincs DOM, nincs szerver, nincs feltöltés. Illesszen be saját jelölést egy belső adminisztrációs panelről vagy egy ügyféloldalról, és semmi sem távozik az eszközről. Másolja a JSX-et, töltse le fájlként, vagy küldje el egy másik TextArray eszközre a következő lépéshez.
Gyakori kérdések
Milyen attribútumokat nevez át?
class → className, a → htmlFor és a camelCase formák A React elvárásai: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet és még sok más. A data-* és aria-* attribútumok pontosan úgy maradnak, ahogy vannak, mert a JSX ezeket kötőjellel tartja.
Konvertálja a soron belüli stílusokat?
Igen, ha a "Stílus konvertálása objektummá" be van kapcsolva. Minden deklaráció camelCased kulcs lesz, idézőjeles karakterlánc értékkel egy dupla kapcsos kapcsos zárójeles objektumon belül. Kapcsolja ki az opciót, hogy érintetlenül hagyja a stílus karakterláncait.
Ez egy teljes HTML elemző?
Nem – ez egy gyors karakterlánc-transzformáció, nem egy böngésző DOM. Lefedi azokat a konverziókat, amelyekre a Reactnak szüksége van: attribútumok átnevezései, soron belüli stílusok, üres elemek és megjegyzések. Nem helyezi be újra és nem érvényesíti a HTML-kódot, így a hibás formátumú címkék írásban jelennek meg.
Fel van töltve valahova a HTML-em?
Nem. Az átalakítás teljes egészében az Ön böngészőjében fut, helyi karakterlánc-feldolgozással. A jelölés soha nem jut el a szerverhez, így a belső vagy ügyfélkód beillesztése biztonságos.