Konwerter HTML na JSX: darmowy, działa w przeglądarce | We.Inc
Wklej HTML i otrzymaj poprawny JSX: class na className, for na htmlFor, style w tekście jako obiekty, zamknięte tagi void, komentarze, zdarzenia i opakowanie w komponent. Nic nie jest wysyłane.
Konwerter HTML na JSX
Wklej HTML po lewej, a konwerter na bieżąco zapisze JSX po prawej: class zmienia się w className, for w htmlFor, style inline w obiekty w camelCase, tagi void, takie jak img i input, są samozamykające się, komentarze trafiają do nawiasów klamrowych, a kilka elementów najwyższego poziomu dostaje fragment. Konwersja działa wyłącznie w Twojej przeglądarce.
Co się zmienia między HTML a JSX
HTML
JSX
Dlaczego
class="box"
className="box"
class to słowo zastrzeżone w JavaScript
for="email"
htmlFor="email"
for też jest słowem zastrzeżonym
style="font-weight: bold"
style={{ fontWeight: 'bold' }}
style przyjmuje obiekt z kluczami w camelCase
<img src="a.png">
<img src="a.png" />
Każdy tag musi być zamknięty
onclick="go()"
onClick={go}
Zdarzenia są w camelCase i przyjmują funkcję
data-id="7", aria-label="Close"
data- i aria- zachowują myślniki
Kopiowanie fragmentu z szablonu, kreatora e-maili lub zestawu ikon do komponentu React zwykle psuje się na kilkunastu drobnych różnicach. To narzędzie stosuje zasady JSX opisane w dokumentacji React, wyjaśnia każdą wprowadzoną zmianę i może opakować wynik w nazwany komponent gotowy do wklejenia.
Wklej lub wpisz HTML w polu wejściowym. Wynik JSX aktualizuje się przy każdym naciśnięciu klawisza.
Opcjonalnie wpisz nazwę komponentu, aby opakować wynik w eksportowany komponent funkcyjny.
Przeczytaj listę zmian pod wynikiem: każda notka wyjaśnia jedno przepisanie wykonane przez konwerter.
Skopiuj JSX do pliku komponentu i zastąp puste handlery zdarzeń prawdziwymi funkcjami.
Kod onclick wpisany inline nie może działać jako JSX. Konwerter zachowuje go jako komentarz w pustym handlerze, abyś mógł przenieść go do funkcji.
Pola formularza z value dostają defaultValue, dzięki czemu pozostają edytowalne. Przejdź na value z onChange, jeśli chcesz kontrolowane pole.
Ikony SVG często mają stroke-width i fill-rule: są one automatycznie zmieniane na strokeWidth i fillRule.
React dodaje px do liczb w obiekcie style, ale ten konwerter zachowuje każdą wartość jako oryginalny string, aby pozostać dokładnym.
Najczęściej zadawane pytania
Dlaczego React używa className zamiast class?
JSX kompiluje się do JavaScript, w którym class jest słowem zastrzeżonym. Dlatego React nazywa ten props className. Z tego samego powodu atrybut for etykiety staje się htmlFor.
Czy atrybuty data- i aria- zmieniają się w JSX?
Nie. Dokumentacja React zaznacza, że z powodów historycznych atrybuty aria-* i data-* zapisuje się dokładnie jak w HTML, z myślnikami. Większość innych wielowyrazowych atrybutów przechodzi na camelCase.
Jak pisać style inline w JSX?
Przekaż do style obiekt z nazwami właściwości w camelCase, na przykład style={{ fontWeight: 'bold', marginTop: 8 }}. React dodaje px do zwykłych liczb dla większości właściwości. Zewnętrzne nawiasy klamrowe otwierają wyrażenie JavaScript, a wewnętrzne to obiekt.
Dlaczego dostaję błąd o wielu elementach głównych?
Komponent może zwrócić tylko jeden element. Opakuj elementy rodzeństwa w element nadrzędny lub pusty fragment, zapisywany jako <> i </>. Konwerter robi to za Ciebie, gdy HTML ma więcej niż jeden węzeł najwyższego poziomu.
Czy mój HTML jest gdzieś wysyłany?
Nie. Konwersja to zwykły JavaScript działający na tej stronie. Nic, co wkleisz, nie jest wysyłane ani zapisywane.
Trzy zasady stojące za każdą konwersją
Oficjalne wprowadzenie React do JSX sprowadza różnice do trzech zasad: zwracaj jeden element główny, zamykaj każdy tag i zapisuj większość nazw atrybutów w camelCase. Niemal wszystko, co robi konwerter, to jedna z tych trzech zasad.
Wyjątki to słowa zastrzeżone i rodziny atrybutów z myślnikami. class i for są przemianowywane, bo JavaScript je rezerwuje, a atrybuty aria- i data- zachowują pisownię z HTML.
Co nadal wymaga człowieka
Skrypty inline i handlery zdarzeń zapisane jako tekst to kod, nie markup, więc trzeba je przepisać jako funkcje w komponencie. Konwerter je oznacza, zamiast zgadywać.
Powtarzające się bloki, takie jak elementy listy, często lepiej zapisać jako tablicę mapowaną na JSX. Po konwersji poszukaj skopiowanych elementów rodzeństwa i zamień je na dane i wywołanie map.
Zmiany nazw atrybutów stosowane przez konwerter
Atrybut HTML na props JSX
HTML
JSX
className
htmlFor
tabIndex
readOnly
maxLength
colspan / rowspan
colSpan / rowSpan
autoComplete
srcSet
crossOrigin
value na input
defaultValue
checked na input
defaultChecked
strokeWidth
fillRule
viewBox
Handlery zdarzeń inline, takie jak onclick, zamieniono na puste handlery w camelCase: przenieś kod do funkcji.
value na polu formularza zmieniono na defaultValue, więc pole pozostaje edytowalne bez handlera onChange.
checked zmieniono na defaultChecked z tego samego powodu.
selected na option usunięto: zamiast tego ustaw defaultValue na select.
Usunięto doctype: JSX nie ma doctype.
Wejście miało więcej niż jeden element najwyższego poziomu, więc opakowano je we fragment.
Konwerter
Poniższy przykład jest konwertowany na żywo: zastąp go własnym HTML.
Nazwa komponentu (opcjonalnie)
Kopiuj JSX
Wprowadzone zmiany
Potrzebne były tylko standardowe zmiany nazw.
Zawartość <{tag}> opakowano w template literal, aby nawiasy klamrowe pozostały dosłowne.