API de Referência

Componentes React DOM

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

Componentes comuns

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

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

Componentes de formulário

Esses componentes embutidos 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 recurso e metadados

Esses componentes embutidos 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 são 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 embutidos do navegador. Isso inclui:

Note

Semelhante ao padrão DOM, o React usa uma convenção camelCase para nomes de props. Por exemplo, você escreve 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, a renderização de elementos personalizados funciona de forma diferente da renderização de tags embutidas do navegador:

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

Se você renderizar um elemento HTML embutido 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 experimentá-lo atualizando os pacotes do React para a versão experimental mais recente:

  • react@experimental
  • react-dom@experimental

Versões experimentais do React podem conter erros. Não os use em produção.

Todos os componentes SVG

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

Note

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

Atributos com namespace também precisam ser escritos sem o cólon:

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