HTML naar React JSX-converter — Numio
Converteert HTML-markeringen naar React JSX met htmltojsx: klasse wordt className, want wordt htmlFor, inline stijlen worden stijlobjecten en ongeldige tags worden automatisch gesloten. Verschillende wortelelementen zijn in een fragment gewikkeld.
Een statische HTML-sjabloon of -formulier verplaatsen naar een React-component.
HTML
JSX
Wanneer gebruik je dit?
- Een statische HTML-sjabloon of -formulier verplaatsen naar een React-component.
- Als u een opmaakfragment uit documentatie of een UI-kit converteert naar JSX, kunt u deze in een component plakken.
Hoe werkt het
- Plak HTML in de linkereditor.
- Open eventueel de instellingen en schakel Functiecomponent maken in om de uitvoer in export const Foo = () => (...) te verpakken.
- Kopieer de JSX, hernoem de component en vervang inline gebeurteniskenmerken door React-handlers.
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 */}
</>Details en beperkingen
De conversie wordt uitgevoerd in de browser en de uitvoer wordt opgemaakt met Prettier (geen puntkomma's).
Inline gebeurtenisattributen zoals onclick="go()" blijven ongewijzigd en worden niet geconverteerd naar onClick-handlers.
Booleaanse attributen krijgen een lege string, b.v. uitgeschakeld = "". React behandelt "" als false, dus wijzig het in uitgeschakeld of uitgeschakeld={true}.
Als de invoer SVG is, toont de pagina een hint die verwijst naar SVG naar JSX.
FAQ
Hoe worden inline stijlen geconverteerd?
De stijltekenreeks wordt geparseerd in een object met camelCase-sleutels, en pixelwaarden worden getallen: style="margin-top: 4px" wordt style={{ marginTop: 4 }}.
Wat gebeurt er met HTML-opmerkingen?
Ze worden bewaard als JSX-opmerkingen, b.v. <!-- hint --> wordt {/* hint */}.
Kan ik de gegenereerde component een naam geven?
Nee. De functieoptie gebruikt altijd de naam Foo. Hernoem het na het kopiëren.