Softonic

Konwerter HTML na JSX

Krok 1 / 2

Konwertuje: class na className, for na htmlFor, style inline na obiekty JSX, domyka puste tagi, usuwa komentarze HTML.

Konwertuj do JSX

JSX wygląda jak HTML, dopóki nim nie jest: class to className, for to htmlFor, style to obiekt, a nie ciąg znaków, a każdy pusty znacznik musi się samozamykać. Wklej HTML, a ten konwerter wygeneruje JSX, który kompiluje się za pierwszym razem, dzięki czemu przeniesiesz stronę marketingową do komponentu React bez spędzania kolejnych dziesięciu minut na ściganiu błędów kompilatora.

Jak przekonwertować HTML na JSX

  1. 1

    Wklej HTML

    Znaczniki na komponent lub fragment całej strony.

  2. 2

    Konwersja

    Narzędzie zmienia nazwy atrybutów takich jak `class`, `for` i `readonly` na zapis JSX i zamienia style inline na obiekty.

  3. 3

    Przejrzyj JSX

    Wynik jest gotowy do wklejenia do pliku `.jsx` lub `.tsx`.

  4. 4

    Skopiuj i wstaw

    Kod używa wyrażeń jednoliniowych, więc dobrze pasuje wewnątrz istniejącego komponentu.

Każda istotna różnica między HTML a JSX

JSX to nie HTML. To wyrażenie JavaScript, które kompiluje się do wywołań React.createElement(), więc nazwy atrybutów stosują konwencje JavaScriptu.

Konwerter automatycznie wykonuje najczęstsze zmiany nazw. Pełna lista poniżej to referencja, której potrzebujesz, pisząc JSX ręcznie.

Zmiany nazw atrybutów

HTML JSX Uwagi
class className class jest zarezerwowane w JS
for htmlFor for jest zarezerwowane
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Przestrzenie nazw z dwukropkiem spłaszczane
aria-label aria-label ARIA zachowuje myślniki
data-* data-* Atrybuty danych zachowują myślniki

Atrybut style

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Wartości liczbowe bez jednostek stają się pikselami; ciągi zachowuj dla procentów i wartości bez jednostek, takich jak flex.

Samozamykające się elementy puste

HTML toleruje <br> i <input> bez znacznika zamykającego. JSX wymaga <br /> i <input />, każdy element musi być jawnie zamknięty.

Komentarze

Komentarze HTML (<!-- -->) nie są dozwolone w ciele JSX. Ten konwerter je usuwa; jeśli chcesz zachować notatkę, napisz ją sam jako {/* Komentarz blokowy JavaScript */}.

Atrybuty boolowskie

HTML: <input checked> (lub <input checked="checked">)

JSX: <input checked={true} /> lub po prostu <input checked />. Nigdy nie przekazuj ciągu “true”.

Wyjścia awaryjne

  • Niezaufane fragmenty HTML można renderować przez dangerouslySetInnerHTML={{ __html: ... }}, celowo brzydko, aby zniechęcić do użycia.
  • Niestandardowe atrybuty data-* pozostają bez zmian; atrybuty niestandardowe są przekazywane dalej, ale mogą wywołać ostrzeżenia Reacta w trybie deweloperskim.

Najczęściej zadawane pytania

Atrybuty SVG, takie jak stroke-width, muszą być zapisane w camelCase (strokeWidth) w JSX, a każdy znacznik musi się samozamykać. Konwerter samozamyka znaczniki puste w SVG i zamienia nazwy właściwości w ciągach stylów na camelCase, ale nie zmienia nazw atrybutów SVG; zamień stroke-width na strokeWidth ręcznie. W przypadku pojedynczych ikon najczystszym podejściem jest zapisanie ikony jako pliku SVG i zaimportowanie jej jako komponentu przez svgr.

Tak, zarówno JSX, jak i TSX używają className. Jedynym wyjątkiem jest dangerouslySetInnerHTML, gdzie surowy ciąg HTML zachowuje class, ponieważ jest wstawiany do DOM bez zmian.

Nie. Wynik to tylko fragment JSX, bez opakowania export default function i bez adnotacji typów. Wklej go do pliku .jsx lub .tsx i dodaj propsy, typy oraz opakowanie samodzielnie. class nadal jest zamieniane na className, czego dokładnie oczekuje TSX.

Są przekazywane bez zmian. Konwerter nie zmienia nazw procedur obsługi zdarzeń, więc zmień onclick na onClick i zastąp wartość ciągu prawdziwą funkcją, na przykład onClick={() => doThing()}. Funkcję doThing musisz zdefiniować w zakresie swojego komponentu.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Narzędzie jest dostępne w innych językach