API de Referência

Componentes do React DOM

O React suporta todos os componentes internos de HTML e SVG do navegador.

Componentes Comuns

Todos os componentes internos do navegador suportam algumas props e eventos.

Isso inclui props específicas do React, como ref e dangerouslySetInnerHTML.

Componentes de Formulário

Esses componentes internos do navegador aceitam entrada do usuário:

Eles são especiais no React porque passar a prop value para eles os torna controlados.

Componentes de Recursos e Metadados

Esses componentes internos do navegador permitem que você carregue recursos externos ou anote o documento com metadados:

Eles são especiais no React porque o React pode renderizá-los no cabeçalho do documento, suspender enquanto os recursos estão sendo carregados e realizar outros comportamentos que são descritos na página de referência para cada componente específico.

Todos os Componentes HTML

O React suporta todos os componentes HTML internos do navegador. Isso inclui:

Note

Semelhante ao padrão DOM, o React usa uma convenção de camelCase para nomes de props. Por exemplo, você escreverá tabIndex em vez de tabindex. Você pode converter HTML existente para JSX com um conversor online.

Elementos HTML Personalizados

Se você renderizar uma tag com um hífen, como <my-element>, o React assumirá que você deseja renderizar um elemento HTML personalizado. No React, renderizar elementos personalizados funciona de maneira diferente de renderizar tags internas do navegador:

  • Todas as props de elementos personalizados são serializadas como strings e são sempre definidas usando atributos.
  • Elementos personalizados aceitam class em vez de className, e for em vez de htmlFor.

Se você renderizar um elemento HTML interno do navegador com um atributo is, ele também será tratado como um elemento personalizado.

Note

Uma versão futura do React incluirá suporte mais abrangente para elementos personalizados.

Você pode experimentar isso atualizando os pacotes do React para a versão experimental mais recente:

  • react@experimental
  • react-dom@experimental

Versões experimentais do React podem conter bugs. Não use-as em produção.

Todos os Componentes SVG

O React suporta todos os componentes SVG internos do navegador. Isso inclui:

Note

Semelhante ao padrão DOM, o React usa uma convenção de camelCase para nomes de props. Por exemplo, você escreverá tabIndex em vez de tabindex. Você pode converter SVG existente para JSX com um conversor online.

Atributos nomeados também devem ser escritos sem os dois pontos:

  • xlink:actuate se torna xlinkActuate.
  • xlink:arcrole se torna xlinkArcrole.
  • xlink:href se torna xlinkHref.
  • xlink:role se torna xlinkRole.
  • xlink:show se torna xlinkShow.
  • xlink:title se torna xlinkTitle.
  • xlink:type se torna xlinkType.
  • xml:base se torna xmlBase.
  • xml:lang se torna xmlLang.
  • xml:space se torna xmlSpace.
  • xmlns:xlink se torna xmlnsXlink.
PrevioususeFormStatus
NextCommon (e.g. <div>)