Componentes de React DOM
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:
<aside>
<audio>
<b>
<base>
<bdi>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<slot>
<small>
<source>
<span>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<u>
<ul>
<var>
<video>
<wbr>
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 declassName
, yfor
en vez dehtmlFor
.
Si renderizas un elemento HTML integrado en el navegador con un atributo is
, también será tratado como un elemento personalizado.
Todos los componentes SVG
React admite todos los componentes SVG integrados en el navegador. Esto incluye:
<a>
<animate>
<animateMotion>
<animateTransform>
<circle>
<clipPath>
<defs>
<desc>
<discard>
<ellipse>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feDropShadow>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<foreignObject>
<g>
<hatch>
<hatchpath>
<image>
<line>
<linearGradient>
<marker>
<mask>
<metadata>
<mpath>
<path>
<pattern>
<polygon>
<polyline>
<radialGradient>
<rect>
<script>
<set>
<stop>
<style>
<svg>
<switch>
<symbol>
<text>
<textPath>
<title>
<tspan>
<use>
<view>