Konwerter HTML na JSX dla React — Numio
Konwertuje znaczniki HTML na React JSX z htmltojsx: klasa staje się className, w przypadku staje się htmlFor, style wbudowane stają się obiektami stylu, a znaczniki void są samozamykające. Kilka elementów głównych jest zawiniętych we fragment.
Przenoszenie statycznego szablonu lub formularza HTML do komponentu React.
HTML
JSX
Kiedy go używać
- Przenoszenie statycznego szablonu lub formularza HTML do komponentu React.
- Konwertując fragment znaczników z dokumentacji lub zestawu UI na JSX, który możesz wkleić do komponentu.
Jak używać
- Wklej HTML do lewego edytora.
- Opcjonalnie otwórz ustawienia i włącz opcję Utwórz komponent funkcji, aby zawinąć dane wyjściowe w const eksportu Foo = () => (...).
- Skopiuj JSX, zmień nazwę komponentu i zastąp wbudowane atrybuty zdarzeń procedurami obsługi React.
HTML
<label class="field" for="email">Email</label> <input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled> <!-- hint -->
JSX
<>
<label className="field" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
tabIndex={1}
style={{ marginTop: 4, fontSize: 14 }}
disabled=""
/>
{/* hint */}
</>Szczegóły i ograniczenia
Konwersja przebiega w przeglądarce, a dane wyjściowe są sformatowane w formacie Prettier (bez średników).
Wbudowane atrybuty zdarzeń, takie jak onclick="go()" są zachowywane w niezmienionej postaci, a nie konwertowane do procedur obsługi onClick.
Atrybuty logiczne otrzymują pusty ciąg znaków, np. disabled="". React traktuje "" jako false, dlatego zmień zapis na disabled lub disabled={true}.
Jeśli dane wejściowe to SVG, na stronie pojawi się wskazówka wskazująca od SVG do JSX.
FAQ
W jaki sposób konwertowane są style wbudowane?
Ciąg stylu jest przetwarzany w obiekt za pomocą kluczy camelCase, a wartości pikseli stają się liczbami: style="margin-top: 4px" staje się style={{ marginTop: 4 }}.
Co się dzieje z komentarzami HTML?
Są zachowywane jako komentarze JSX, np. <!-- hint --> staje się {/* hint */}.
Czy mogę nazwać wygenerowany komponent?
Nie. Opcja funkcji zawsze używa nazwy Foo. Zmień nazwę po skopiowaniu.