Referencia de la API

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.

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.

Componentes de Recursos y Metadatos

Estos componentes integrados del navegador te permiten cargar recursos externos o anotar el documento con metadatos:

Son especiales en React porque React puede renderizarlos en el encabezado del documento, suspender mientras se cargan los recursos y aplicar otros comportamientos que se describen en la página de referencia de cada componente específico.

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.

  • 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.

Setting values on custom elements

Custom elements have two methods of passing data into them:

  1. Attributes: Which are displayed in markup and can only be set to string values
  2. Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values

By default, React will pass values bound in JSX as attributes:

<my-element value="Hello, world!"></my-element>

Non-string JavaScript values passed to custom elements will be serialized by default:

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

React will, however, recognize an custom element’s property as one that it may pass arbitrary values to if the property name shows up on the class during construction:

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // The value here will be overwritten by React 
    // when initialized as an element
    this.value = undefined;
  }

  connectedCallback() {
    this.innerHTML = this.value.join(", ");
  }
}

Listening for events on custom elements

A common pattern when using custom elements is that they may dispatch CustomEvents rather than accept a function to call when an event occur. You can listen for these events using an on prefix when binding to the event via JSX.

export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

Nota

Los eventos distinguen entre mayúsculas y minúsculas y admiten guiones (-). Conserva las mayúsculas del evento e incluye todos los guiones al escuchar los eventos del elemento personalizado:

// Escucha eventos `say-hi`
<my-element onsay-hi={console.log}></my-element>
// Escucha eventos `sayHi`
<my-element onsayHi={console.log}></my-element>

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.
AnterioruseFormStatus
SiguienteComunes (p. ej. <div>)