API 参考

React DOM 组件

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

常见组件

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

这包括像 ref 和 dangerouslySetInnerHTML 这样的 React 特有 props。

表单组件

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

它们在 React 中是特殊的，因为向它们传递 value prop 会使它们变为 受控。

资源和元数据组件

这些内置的浏览器组件让你可以加载外部资源，或用元数据标注文档：

它们在 React 中是特殊的，因为 React 可以将它们渲染到 document head 中，在资源加载时挂起，并执行各组件参考页中描述的其他行为。

所有 HTML 组件

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

Note

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

自定义 HTML 元素

如果你渲染一个带有连字符的标签，比如 <my-element>，React 会假定你想渲染一个 自定义 HTML 元素。

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

在自定义元素上设置值

自定义元素有两种向其传递数据的方法：

  1. 属性：会显示在标记中，并且只能设置为字符串值
  2. 属性（properties）：不会显示在标记中，并且可以设置为任意 JavaScript 值

默认情况下，React 会将 JSX 中绑定的值作为属性传递：

<my-element value="Hello, world!"></my-element>

传递给自定义元素的非字符串 JavaScript 值默认会被序列化：

// 将作为 `"1,2,3"` 传递，等同于 `[1,2,3].toString()` 的输出
<my-element value={[1,2,3]}></my-element>

不过，如果某个自定义元素的属性名在构造期间出现在类上，React 就会将其识别为可以向其传递任意值的属性：

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // 此处的值将被 React 覆盖
    // 当其作为元素初始化时
    this.value = undefined;
  }

  connectedCallback() {
    this.innerHTML = this.value.join(", ");
  }
}

监听自定义元素上的事件

使用自定义元素时，一个常见模式是它们可能会派发 CustomEvents，而不是接受一个在事件发生时调用的函数。你可以在通过 JSX 绑定事件时使用 on 前缀来监听这些事件。

export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

Note

事件区分大小写，并支持连字符（-）。监听自定义元素的事件时，请保持事件名称的大小写，并包含所有连字符：

// 监听 `say-hi` 事件
<my-element onsay-hi={console.log}></my-element>
// 监听 `sayHi` 事件
<my-element onsayHi={console.log}></my-element>

所有 SVG 组件

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

Note

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

带命名空间的属性也必须去掉冒号来书写：

  • 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。
PrevioususeFormStatus
NextCommon (e.g. <div>)