Convertir HTML a JSX de React
Convierte marcado HTML a JSX de React con htmltojsx: class pasa a className, for a htmlFor, los estilos en línea a objetos style y las etiquetas vacías se cierran solas. Si hay varios elementos raíz, se envuelven en un fragment.
Pasar una plantilla HTML estática o un formulario a un componente de React.
HTML
JSX
Cuándo usarla
- Pasar una plantilla HTML estática o un formulario a un componente de React.
- Convertir un fragmento de marcado de una documentación o de un kit de UI en JSX que puedas pegar en un componente.
Cómo usarla
- Pega HTML en el editor izquierdo.
- Opcionalmente, abre la configuración y activa Create function component para envolver la salida en export const Foo = () => (...).
- Copia el JSX, cambia el nombre del componente y sustituye los atributos de evento en línea por handlers de 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 */}
</>Detalles y limitaciones
La conversión se ejecuta en el navegador y la salida se formatea con Prettier (sin punto y coma).
Los atributos de evento en línea como onclick="go()" se mantienen tal cual, no se convierten en handlers onClick.
Los atributos booleanos reciben una cadena vacía, por ejemplo disabled="". React trata "" como false, así que cámbialo a disabled o disabled={true}.
Si la entrada es SVG, la página muestra un aviso que remite a SVG a JSX.
FAQ
¿Cómo se convierten los estilos en línea?
La cadena style se analiza como un objeto con claves en camelCase, y los valores en píxeles pasan a números: style="margin-top: 4px" se convierte en style={{ marginTop: 4 }}.
¿Qué pasa con los comentarios HTML?
Se mantienen como comentarios JSX, por ejemplo <!-- hint --> se convierte en {/* hint */}.
¿Puedo poner nombre al componente generado?
No. La opción de función siempre usa el nombre Foo. Cámbialo después de copiarlo.