HTML till JSX-konverterare
Förvandla HTML-uppmärkning till JSX som du kan klistra in direkt i en React-komponent.
HTML till JSX-konverterare
Klistra in HTML-uppmärkning och skaffa JSX som du kan släppa direkt i en React-komponent. Omvandlaren byter namn på varje attribut React förväntar sig ett annat namn för — class blir className, for blir htmlFor, tabindex blir tabIndex, colspan blir colSpan och dussintals fler — så konsolen slutar varna för okända DOM-egenskaper i det ögonblick du klistrar in ett utdrag som kopierats från ett designverktyg, en CMS-export, en e-postsidmall eller en gammal statisk sidmall.
Inline-stilar är nästa sak som React vägrar som en vanlig sträng. Slå på "Konvertera stil till objekt" och style="color:red;font-size:16px" blir style={{ color: 'red', fontSize: '16px' }}, med varje egenskap camelCased och varje värde som citeras, redo för stilen. Void element är den tredje haken: HTML låter dig lämna <br>, <img>, <input>, <hr> och <meta> oslutna, men JSX kommer inte att analysera dem, så "Self-close void elements" skriver om dem som <br />, <img /> och så vidare åt dig.
HTML-kommentarer blir det enda kommentarsformuläret som JSX accepterar inuti uppmärkning, så <!-- like this --> blir {/* så här */}. Textinnehåll, blanksteg och radbrytningar förblir exakt som du skrev dem, så din indragning och kopia överlever konverteringen orörd, och data-* och aria-*-attribut lämnas medvetet avstavade eftersom JSX behåller dem som de är. Båda alternativen är på som standard och kan stängas av när du bara vill byta namn på attributet.
Hela konverteringen sker i din webbläsare som vanlig strängbearbetning - ingen DOM, ingen server, ingen uppladdning. Klistra in proprietär markering från en intern adminpanel eller en klientwebbplats och ingenting lämnar din enhet. Kopiera JSX, ladda ner den som en fil eller skicka den till ett annat TextArray-verktyg för nästa steg.