Convertitore da HTML a React JSX — Numio
Converte markup HTML in React JSX con htmltojsx: class diventa className, for diventa htmlFor, gli stili inline diventano oggetti style e i tag vuoti vengono chiusi automaticamente. Più elementi radice vengono racchiusi in un frammento.
Spostare un modello o un modulo HTML statico in un componente React.
HTML
JSX
Quando usarlo
- Spostare un modello o un modulo HTML statico in un componente React.
- Convertendo uno snippet di markup dalla documentazione o da un kit UI in JSX puoi incollarlo in un componente.
Come si usa
- Incolla HTML nell'editor di sinistra.
- Facoltativamente, apri le impostazioni e attiva Crea componente funzione per racchiudere l'output in export const Foo = () => (...).
- Copia JSX, rinomina il componente e sostituisci gli attributi dell'evento in linea con i gestori 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 */}
</>Dettagli e limiti
La conversione viene eseguita nel browser e l'output è formattato con Prettier (senza punto e virgola).
Gli attributi degli eventi in linea come onclick="go()" vengono mantenuti così come sono, non convertiti in gestori onClick.
Gli attributi booleani ricevono una stringa vuota, ad esempio disabled="". React interpreta "" come false, quindi usa disabled oppure disabled={true}.
Se l'input è SVG, la pagina mostra un suggerimento che punta da SVG a JSX.
FAQ
Come vengono convertiti gli stili in linea?
La stringa di stile viene analizzata in un oggetto con le chiavi camelCase e i valori dei pixel diventano numeri: style="margin-top: 4px" diventa style={{ marginTop: 4 }}.
Cosa succede ai commenti HTML?
Restano commenti JSX, ad esempio <!-- hint --> diventa {/* hint */}.
Posso nominare il componente generato?
No. L'opzione della funzione utilizza sempre il nome Foo. Rinominarlo dopo la copia.