React DOM 组件

React 支持所有浏览器内置的 HTML 与 SVG 组件。

通用组件

所有的浏览器内置组件都支持一些共同的属性与方法。

通用组件（如 <div>）

这些组件在 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 支持所有浏览器内置的组件，包括：

注意

与 DOM 标准类似，React 使用 camelCase 命名约定来命名 props。例如，你应该使用 tabIndex 而不是 tabindex。你可以使用在线转换器将现有的 HTML 转换为 JSX。

自定义 HTML 元素

如果你渲染一个带有连字符的标签，如 <my-element>，React 会认为你想要渲染一个自定义 HTML 元素。在 React 中，渲染自定义元素与渲染内置的浏览器标签有所不同：

所有自定义元素的 props 都将被序列化为字符串，并且总是使用属性（attribute）进行设置。
自定义元素接受 class 而不是 className，接受 for 而不是 htmlFor。

如果你使用 is 属性渲染一个内置的浏览器 HTML 元素，它也会被视为自定义元素。

注意

未来的 React 版本将提供更全面的自定义元素支持。

你可以通过将 React 包升级到最新的实验性版本来尝试：

react@experimental
react-dom@experimental

实验性版本的 React 可能包含一些错误，因此不要在生产环境中使用。

所有 SVG 组件

React 支持所有浏览器内置的 SVG 组件，包括：

注意

与 DOM 标准类似，React 使用 camelCase 命名约定来命名 props。例如，你应该使用 tabIndex 而不是 tabindex。你可以使用在线转换器将现有的 SVG 转换为 JSX。

命名空间属性（attribute）也必须写成没有冒号的形式：

xlink:actuate 改为 xlinkActuate。
xlink:arcrole 改为 xlinkArcrole。
xlink:href 改为 xlinkHref。
xlink:role 改为 xlinkRole。
xlink:show 改为 xlinkShow。
xlink:title 改为 xlinkTitle。
xlink:type 改为 xlinkType。
xml:base 改为 xmlBase。
xml:lang 改为 xmlLang。
xml:space 改为 xmlSpace。
xmlns:xlink 改为 xmlnsXlink。

上一页useFormStatus

下一页Common (e.g. <div>)