Konwerter HTML na JSX
Zamień znaczniki HTML w JSX, które możesz wkleić bezpośrednio do komponentu React.
Konwerter HTML na JSX
Wklej znaczniki HTML i pobierz JSX, który możesz wrzucić bezpośrednio do komponentu React. Konwerter zmienia nazwę każdego atrybutu, którego React oczekuje innej nazwy — class staje się className, for staje się htmlFor, tabindex staje się tabIndex, colspan staje się colSpan i dziesiątki innych — dzięki czemu konsola przestaje ostrzegać o nieznanych właściwościach DOM w momencie wklejenia fragmentu skopiowanego z narzędzia do projektowania, eksportu CMS, szablonu wiadomości e-mail lub starej strony statycznej.
Style wbudowane to kolejna rzecz, którą React odrzuca jako zwykły ciąg znaków. Włącz „Konwertuj styl na obiekt” i style="color:red;font-size:16px" stanie się style={{ color: 'red',fontSize: '16px' }}, z każdą właściwością camelCased i każdą cytowaną wartością, gotowymi na podpórkę stylu. Elementy puste to trzeci haczyk: HTML pozwala pozostawić <br>, <img>, <input>, <hr> i <meta> niezamknięte, ale JSX ich nie przeanalizuje, więc „samozamykające się puste elementy” zapisują je jako <br />, <img /> i tak dalej.
Komentarze HTML stają się jedyną formą komentarza, którą JSX akceptuje w znacznikach wewnętrznych, więc <!-- w ten sposób --> staje się {/* w ten sposób */. Treść tekstowa, białe znaki i podziały wierszy pozostają dokładnie takie, jakie napisałeś, więc wcięcia i kopia przetrwają konwersję w nienaruszonym stanie, a atrybuty data-* i aria-* celowo pozostawiono z łącznikami, ponieważ JSX zachowuje je bez zmian. Obie opcje są domyślnie włączone i można je wyłączyć, jeśli chcesz tylko zmienić nazwę atrybutu.
Cała konwersja odbywa się w przeglądarce w formie zwykłego przetwarzania ciągu znaków — bez DOM, bez serwera, bez przesyłania. Wklej zastrzeżony znacznik z wewnętrznego panelu administracyjnego lub strony klienta i nic nie opuści Twojego urządzenia. Skopiuj plik JSX, pobierz go jako plik lub wyślij do innego narzędzia TextArray w celu wykonania następnego kroku.