W tym artykule
Dlaczego HTML wymaga konwersji dla React
JSX wygląda jak HTML, ale podlega regułom składni JavaScript. React używa JSX do opisywania struktury interfejsu użytkownika, i chociaż przypomina HTML, kilka atrybutów i wzorców się różni. Wklejenie surowego HTML do komponentu React zazwyczaj powoduje błędy kompilacji lub nieoczekiwane zachowanie.
Najczęstsze różnice obejmują nazewnictwo atrybutów (class staje się className, for staje się htmlFor), składnię stylów inline (ciągi znaków stają się obiektami z właściwościami w camelCase), samozamykające się tagi (każdy element pusty musi się samozamknąć) oraz nazewnictwo obsługi zdarzeń (onclick staje się onClick). Konwerter automatyzuje te żmudne transformacje.
Co jest konwertowane
Konwerter HTML do JSX od CheckTown obsługuje wszystkie standardowe transformacje między składnią HTML i JSX.
- Zmiana nazw atrybutów — class na className, for na htmlFor, tabindex na tabIndex i wszystkie inne nazwy atrybutów specyficzne dla React
- Analiza stylów — atrybuty style inline z ciągami CSS są konwertowane na obiekty JavaScript z nazwami właściwości w camelCase i wartościami tekstowymi
- Samozamykające się tagi — elementy jak <img>, <br>, <hr> i <input> są konwertowane do <img />, <br />, <hr />, <input />
- Atrybuty logiczne — checked, disabled, readonly są konwertowane do ich odpowiedników JSX
Wypróbuj za darmo — bez rejestracji
Konwertuj HTML do JSX →Typowe pułapki przy konwersji HTML do JSX
Nawet przy automatycznej konwersji istnieją wzorce wymagające ręcznej uwagi po początkowej transformacji.
- Komentarze HTML są konwertowane na składnię komentarzy JSX — sprawdź, czy zagnieżdżone komentarze nie powodują problemów
- Atrybuty SVG jak stroke-width i fill-opacity używają camelCase w JSX (strokeWidth, fillOpacity) — zweryfikuj treść z dużą ilością SVG
- Wbudowane procedury obsługi zdarzeń z ciągami JavaScript (onclick="alert()") wymagają ręcznej konwersji na procedury obsługi JSX z funkcjami strzałkowymi
- Encje HTML mogą wymagać konwersji na znaki Unicode lub wyrażenia JSX
Często zadawane pytania
Czy konwersja jest w 100% dokładna dla całego HTML?
Konwerter dokładnie obsługuje standardowe mapowanie atrybutów HTML-JSX, parsowanie stylów i samozamykające się tagi. Jednak złożone wzorce jak inline obsługa zdarzeń JavaScript, osadzone skrypty lub niestandardowe atrybuty mogą wymagać ręcznych korekt po konwersji.
Czy mogę konwertować szablony HTML z dynamicznymi danymi?
Konwerter działa na statycznym znaczniku HTML. Składnia szablonów z innych frameworków (jak *ngFor z Angular lub v-for z Vue) zostanie zachowana, ale nie będzie działać w React. Musisz ręcznie konwertować dyrektywy szablonów na wyrażenia JSX.
Czy konwerter obsługuje dangerouslySetInnerHTML?
Nie. Konwerter przekształca strukturę HTML w strukturę JSX. Jeśli musisz renderować surowe ciągi HTML w React, użyjesz dangerouslySetInnerHTML ręcznie. Konwerter jest zaprojektowany do migracji strukturalnej, nie do wstrzykiwania HTML w czasie wykonania.