React DOM 组件
通用组件
所有的浏览器内置组件都支持一些共同的属性与方法。
这些组件在 React 中可以使用 React 特有的属性,如 ref
与 dangerouslySetInnerHTML
。
表单组件
这些浏览器内置组件接收用户的输入:
将 value
作为 prop 传递给这些组件会将其变为 受控组件。
Resource and Metadata Components
These bulit-in browser components let you load external resources or annotate the document with metadata:
They are special in React because React can render them into the document head, suspend while resources are loading, and enact other behaviors that are described on the reference page for each specific component.
所有的 HTML 组件
React 支持所有浏览器内置的组件,包括:
<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>
自定义 HTML 元素
如果你渲染一个带有连字符的标签,如 <my-element>
,React 会认为你想要渲染一个 自定义 HTML 元素。在 React 中,渲染自定义元素与渲染内置的浏览器标签有所不同:
- 所有自定义元素的 props 都将被序列化为字符串,并且总是使用属性(attribute)进行设置。
- 自定义元素接受
class
而不是className
,接受for
而不是htmlFor
。
如果你使用 is
属性渲染一个内置的浏览器 HTML 元素,它也会被视为自定义元素。
所有 SVG 组件
React 支持所有浏览器内置的 SVG 组件,包括:
<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>