React DOM 组件

React 支持所有浏览器内置的 HTMLSVG 组件。

¥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.

这包括 React 特定的属性,如 refdangerouslySetInnerHTML

¥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 元素。

¥If you render a tag with a dash, like <my-element>, React will assume you want to render a custom HTML element.

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

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

设置自定义元素的值

¥Setting values on custom elements

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

¥Custom elements have two methods of passing data into them:

  1. 属性:哪些显示在标记中,并且只能设置为字符串值

    ¥Attributes: Which are displayed in markup and can only be set to string values

  2. 属性:哪些不会显示在标记中,并且可以设置为任意 JavaScript 值

    ¥Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values

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

¥By default, React will pass values bound in JSX as attributes:

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

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

¥Non-string JavaScript values passed to custom elements will be serialized by default:

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

但是,如果自定义元素的属性名称在构造过程中出现在类中,React 会将其识别为可以向其传递任意值的属性:

¥React will, however, recognize an custom element’s property as one that it may pass arbitrary values to if the property name shows up on the class during construction:

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // The value here will be overwritten by React 
    // when initialized as an element
    this.value = undefined;
  }

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

监听自定义元素上的事件

¥Listening for events on custom elements

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

¥A common pattern when using custom elements is that they may dispatch CustomEvents rather than accept a function to call when an event occur. You can listen for these events using an on prefix when binding to the event via JSX.

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

注意

事件区分大小写并支持破折号 (-)。在监听自定义元素的事件时,保留事件的大小写并包含所有破折号:

¥Events are case-sensitive and support dashes (-). Preserve the casing of the event and include all dashes when listening for custom element’s events:

// Listens for `say-hi` events
<my-element onsay-hi={console.log}></my-element>
// Listens for `sayHi` events
<my-element onsayHi={console.log}></my-element>

所有 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.