Componentes de React DOM

React admite todos los componentes HTML y SVG integrados en el navegador.

Componentes comunes

Todos los componentes integrados en el navegador admiten algunas props y eventos.

Componentes comunes (ej. <div>)

Esto incluye props específicos de React como ref y dangerouslySetInnerHTML.

Componentes de formulario

Estos componentes integrados en el navegador aceptan la entrada del usuario:

Son especiales en React porque pasando el prop value los hace controlados.

Todos los componentes HTML

React admite todos los componentes HTML integrados en el navegador. Esto incluye:

Nota

Similar al estándar DOM, React usa la convención camelCase para los nombres de las props. Por ejemplo, escribirás tabIndex en lugar de tabindex. Puedes convertir HTML existente a JSX con un convertidor en línea.

Elementos HTML personalizados

Si renderizas una etiqueta con un guión, como <my-element>, React asumirá que quieres renderizar un elemento HTML personalizado. En React, el renderizado de elementos personalizados funciona de manera diferente desde el renderizado de etiquetas integradas del navegador:

Todas las props de los elementos personalizados son serializadas a strings y siempre se configuran usando atributos.
Los elementos personalizados aceptan class en vez de className, y for en vez de htmlFor.

Si renderizas un elemento HTML integrado en el navegador con un atributo is, también será tratado como un elemento personalizado.

Nota

Una versión futura de React incluirá un soporte más completo para elementos personalizados.

Puedes probar actualizando los paquetes de React a la versión experimental más reciente:

react@experimental
react-dom@experimental

Las versiones experimentales de React pueden contener errores. No las uses en producción.

Todos los componentes SVG

React admite todos los componentes SVG integrados en el navegador. Esto incluye:

Nota

Similar al estándar DOM, React usa lacamelCase para los nombres de las props. Por ejemplo, escribirás tabIndex en lugar de tabindex. Puedes convertir SVG existente a JSX con un convertidor en línea.

Los atributos de espacio de nombres también tienen que estar escritos sin los dos puntos:

xlink:actuate se convierte en xlinkActuate.
xlink:arcrole se convierte en xlinkArcrole.
xlink:href se convierte en xlinkHref.
xlink:role se convierte en xlinkRole.
xlink:show se convierte en xlinkShow.
xlink:title se convierte en xlinkTitle.
xlink:type se convierte en xlinkType.
xml:base se convierte en xmlBase.
xml:lang se convierte en xmlLang.
xml:space se convierte en xmlSpace.
xmlns:xlink se convierte en xmlnsXlink.

SiguienteCommon (e.g. <div>)