React DOM 组件

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

¥React supports all of the browser built-in HTML and SVG components.

常用组件

¥Common components

所有内置的浏览器组件都支持一些属性和事件。

¥All of the built-in browser components support some props and events.

常用组件（例如 <div>）

¥Common components (e.g. <div>)

这包括 React 特定的属性，如 ref 和 dangerouslySetInnerHTML。

¥This includes React-specific props like ref and dangerouslySetInnerHTML.

表单组件

¥Form components

这些内置浏览器组件接受用户输入：

¥These built-in browser components accept user input:

它们在 React 中很特别，因为将 value 属性传递给它们会使它们成为受控。

¥They are special in React because passing the value prop to them makes them controlled.

资源和元数据组件

¥Resource and Metadata Components

这些内置的浏览器组件允许你加载外部资源或使用元数据注释文档：

¥These built-in browser components let you load external resources or annotate the document with metadata:

它们在 React 中很特殊，因为 React 可以将它们渲染到文档头中，在加载资源时挂起，并执行每个特定组件的参考页面上描述的其他行为。

¥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 组件

¥All HTML components

React 支持所有内置的浏览器 HTML 组件。这包括：

¥React supports all built-in browser HTML components. This includes:

注意

与 DOM 标准，类似，React 对属性名称使用 camelCase 约定。例如，你将编写 tabIndex 而不是 tabindex。你可以使用在线转换器将现有的 HTML 转换为 JSX

¥Similar to the DOM standard, React uses a camelCase convention for prop names. For example, you’ll write tabIndex instead of tabindex. You can convert existing HTML to JSX with an online converter.

自定义 HTML 元素

¥Custom HTML elements

如果你渲染一个带有破折号的标签，比如 <my-element>，React 会假设你想要渲染一个自定义 HTML 元素。在 React 中，渲染自定义元素与渲染内置浏览器标签的工作方式不同：

¥If you render a tag with a dash, like <my-element>, React will assume you want to render a custom HTML element. In React, rendering custom elements works differently from rendering built-in browser tags:

所有自定义元素属性都序列化为字符串，并且始终使用属性进行设置。

¥All custom element props are serialized to strings and are always set using attributes.
自定义元素接受 class 而不是 className，以及 for 而不是 htmlFor。

¥Custom elements accept class rather than className, and for rather than htmlFor.

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

¥If you render a built-in browser HTML element with an is attribute, it will also be treated as a custom element.

注意

React 的未来版本将包含对自定义元素的更全面支持。

¥A future version of React will include more comprehensive support for custom elements.

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

¥You can try it by upgrading React packages to the most recent experimental version:

react@experimental
react-dom@experimental

React 的实验版本可能包含错误。不要在生产中使用它们。

¥Experimental versions of React may contain bugs. Don’t use them in production.

所有 SVG 组件

¥All SVG components

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

¥React supports all built-in browser SVG components. This includes:

注意

与 DOM 标准，类似，React 对属性名称使用 camelCase 约定。例如，你将编写 tabIndex 而不是 tabindex。你可以使用在线转换器将现有的 SVG 转换为 JSX

¥Similar to the DOM standard, React uses a camelCase convention for prop names. For example, you’ll write tabIndex instead of tabindex. You can convert existing SVG to JSX with an online converter.

命名空间属性也必须不带冒号：

¥Namespaced attributes also have to be written without the colon:

xlink:actuate 变成 xlinkActuate。

¥xlink:actuate becomes xlinkActuate.
xlink:arcrole 变成 xlinkArcrole。

¥xlink:arcrole becomes xlinkArcrole.
xlink:href 变成 xlinkHref。

¥xlink:href becomes xlinkHref.
xlink:role 变成 xlinkRole。

¥xlink:role becomes xlinkRole.
xlink:show 变成 xlinkShow。

¥xlink:show becomes xlinkShow.
xlink:title 变成 xlinkTitle。

¥xlink:title becomes xlinkTitle.
xlink:type 变成 xlinkType。

¥xlink:type becomes xlinkType.
xml:base 变成 xmlBase。

¥xml:base becomes xmlBase.
xml:lang 变成 xmlLang。

¥xml:lang becomes xmlLang.
xml:space 变成 xmlSpace。

¥xml:space becomes xmlSpace.
xmlns:xlink 变成 xmlnsXlink。

¥xmlns:xlink becomes xmlnsXlink.

上一章useFormStatus

下一章常用（例如 <div>）