Convertor HTML în JSX
Transformați marcajul HTML în JSX pe care îl puteți lipi direct într-o componentă React.
Convertor HTML în JSX
Lipiți marcajul HTML și obțineți JSX pe care îl puteți plasa direct într-o componentă React. Convertorul redenumește fiecare atribut React se așteaptă la un alt nume pentru — class devine className, for devine htmlFor, tabindex devine tabIndex, colspan devine colSpan și alte zeci — astfel încât consola încetează să avertizeze despre proprietăți DOM necunoscute în momentul în care lipiți un fragment copiat dintr-un instrument de proiectare, un export CMS, un șablon de pagină static vechi sau un șablon de e-mail vechi.
Stilurile inline sunt următorul lucru pe care React îl refuză ca șir simplu. Activați „Convertiți stilul în obiect” și style="color:red;font-size:16px" devine style={{ color: 'red', fontSize: '16px' }}, cu fiecare proprietate camelCased și fiecare valoare citată, gata pentru prop de stil. Elementele goale sunt a treia captură: HTML vă permite să lăsați <br>, <img>, <input>, <hr> și <meta> neînchise, dar JSX nu le va analiza, așa că „Self-close void elements” le rescrie ca <br />, <img /> și așa mai departe pentru dvs.
Comentariile HTML se transformă în singura formă de comentariu pe care JSX acceptă în interiorul markupului, așa că <!-- like this --> devine {/* like this */}. Conținutul textului, spațiile albe și rupturile de rând rămân exact așa cum le-ați scris, astfel încât indentarea și copierea dvs. supraviețuiesc conversiei neatinse, iar atributele data-* și aria-* sunt lăsate în mod deliberat cu cratime, deoarece JSX le păstrează așa cum sunt. Ambele opțiuni sunt activate în mod implicit și pot fi dezactivate atunci când doriți doar redenumirea atributului.
Întreaga conversie are loc în browserul dvs. ca procesare simplă de șiruri - fără DOM, fără server, fără încărcare. Lipiți marcajul proprietar dintr-un panou de administrare intern sau dintr-un site client și nimic nu va părăsi dispozitivul. Copiați JSX-ul, descărcați-l ca fișier sau trimiteți-l la un alt instrument TextArray pentru următorul pas.