HTML na JSX konvertor

Preveďte HTML značky na JSX, ktoré vložíte priamo do React komponentu.

Vstup

Previesť style na objektUzavrieť prázdne prvky

Výstup

HTML na JSX konvertor

Vložte HTML značky a dostanete JSX, ktoré vložíte rovno do React komponentu. Konvertor premenuje každý atribút, pre ktorý React očakáva iný názov — z class sa stane className, z for sa stane htmlFor, z tabindex tabIndex, z colspan colSpan a mnoho ďalších — takže konzola prestane hlásiť neznáme DOM vlastnosti hneď, ako vložíte úryvok skopírovaný z návrhového nástroja, exportu z CMS, e-mailovej šablóny alebo starej statickej stránky.

Inline štýly sú ďalšia vec, ktorú React ako obyčajný reťazec odmieta. Zapnite „Previesť style na objekt“ a zo style="color:red;font-size:16px" sa stane style={{ color: 'red', fontSize: '16px' }} — každá vlastnosť v tvare camelCase a každá hodnota v úvodzovkách, pripravená pre prop style. Prázdne prvky sú tretí kameň úrazu: HTML dovolí nechať <br>, <img>, <input>, <hr> aj <meta> neuzavreté, no JSX ich neprečíta, preto ich voľba „Uzavrieť prázdne prvky“ prepíše na <br />, <img /> a podobne.

HTML komentáre sa zmenia na jediný tvar komentára, ktorý JSX v značkách znesie, takže z  vznikne {/* takto */}. Text, medzery aj zalomenia riadkov ostanú presne tak, ako ste ich napísali, takže odsadenie aj obsah prevod prežijú nepoškodené, a atribúty data-* a aria-* sú zámerne ponechané so spojovníkom, lebo JSX ich takto ponecháva. Obe voľby sú štandardne zapnuté a dajú sa vypnúť, keď chcete len premenovať atribúty.

Celý prevod prebieha vo vašom prehliadači ako obyčajné spracovanie reťazcov — žiadny DOM, žiadny server, žiadne nahrávanie. Vložte súkromné značky z interného admin panelu alebo z klientskej stránky a nič neopustí vaše zariadenie. Výsledné JSX skopírujte, stiahnite ako súbor alebo ho pošlite do ďalšieho nástroja TextArray na nasledujúci krok.

Časté otázky

Ktoré atribúty premenuje?

class → className, for → htmlFor a tvary v camelCase, ktoré React očakáva: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet a mnoho ďalších. Atribúty data-* a aria-* ostávajú presne tak, ako sú, lebo JSX ich ponecháva so spojovníkom.

Prevedie aj inline štýly?

Áno, keď je zapnutá voľba „Previesť style na objekt“. Každá deklarácia sa stane kľúčom v camelCase s hodnotou ako reťazec v úvodzovkách vnútri objektu style. Vypnutím voľby ostanú vaše reťazce style nezmenené.

Je to plnohodnotný HTML parser?

Nie — je to rýchly prevod reťazcov, nie DOM prehliadača. Pokrýva prevody, ktoré React naozaj potrebuje: premenovanie atribútov, inline štýly, prázdne prvky a komentáre. Neodsadzuje ani nekontroluje HTML, takže chybné značky prejdú tak, ako sú napísané.

Nahráva sa moje HTML niekam?

Nie. Prevod beží výhradne vo vašom prehliadači ako lokálne spracovanie reťazcov. Vaše značky nikdy neopustia server, takže vkladať interný či klientsky kód je bezpečné.

HTML na JSX konvertor

Súvisiace nástroje

HTML na JSX konvertor

Časté otázky