API 参考

React DOM 组件

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

通用组件

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

这些组件在 React 中可以使用 React 特有的属性，如 ref 与 dangerouslySetInnerHTML。

表单组件

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

将 value 作为 prop 传递给这些组件会将其变为 受控组件。

所有的 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。
下一页Common (e.g. <div>)

你觉得这些文档怎么样？