O tym narzędziu
Konwerter HTML na JSX / React parsuje fragment HTML za pomocą natywnego DOMParser przeglądarki i ponownie serializuje go jako prawidłowy JSX, naprawiając wszystko, czego potrzebuje React. Działa w całości po stronie klienta, więc znaczniki, które wklejasz, pozostają na Twojej maszynie. Wklej dowolny HTML — eksport z projektu, szablon e-maila, szkic komponentu — i otrzymaj JSX, który możesz wstawić bezpośrednio do pliku React.
Przepisywanie zmienia nazwy zarezerwowanych atrybutów (class staje się className, for staje się htmlFor), zamienia resztę na camelCase — tabindex na tabIndex, maxlength na maxLength, stroke-width na strokeWidth — pozostawiając atrybuty data-* i aria-* nietknięte. Puste elementy, takie jak img, br, input i hr, stają się samozamykające (<img />), komentarze HTML stają się {/* ... */}, dosłowne nawiasy klamrowe w tekście są zabezpieczane jako {'{'}, a łańcuch style="a:b;c:d" inline jest konwertowany w obiekt style={{ a: 'b', c: 'd' }} z kluczami CSS w camelCase. Atrybuty logiczne, takie jak disabled, mogą być emitowane gołe lub jako ={true} za pomocą przełącznika.
Wybierz wyjście fragmentu — wiele węzłów głównych jest automatycznie opakowywanych we fragment <>...</> — lub wyjście pełnego komponentu, które opakowuje JSX w export default function z wybraną przez Ciebie nazwą i wcięciem (2 spacje, 4 spacje lub tabulatory). Wynik jest gotowy do wklejenia; ponieważ parsowanie używa prawdziwego DOM, nieprawidłowe zagnieżdżenie jest normalizowane tak samo, jak zrobiłaby to przeglądarka.