Skip to content

index.md

Latest commit

 

History

History
389 lines (320 loc) · 19.4 KB

index.md

File metadata and controls

389 lines (320 loc) · 19.4 KB
title React DOM 组件

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

通用组件 {/common-components/}

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

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

表单组件 {/form-components/}

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

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

资源和元数据组件 {/resource-and-metadata-components/}

通过这些内置浏览器组件，您可以加载外部资源或为文档添加元数据注释：

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

所有的 HTML 组件 {/all-html-components/}

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

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

自定义 HTML 元素 {/custom-html-elements/}

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

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

在自定义元素上设置值 {/attributes-vs-properties/}

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

  1. Attributes：显示在标记中，只能设置为字符串值
  2. Properties：不在标记中显示，可设置为任意 JavaScript 值

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

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

默认情况下，传递给自定义元素的非字符串 JavaScript 值将被序列化：

// 将以 `[1,2,3].toString()` 的输出结果 `"1,2,3"` 的形式传递
<my-element value={[1,2,3]}></my-element>

不过，如果自定义元素的属性名称在构建过程中出现在类上，React 就会将其识别为可以传递任意值的 arbitrary：

import {MyElement} from './MyElement.js';
import { createRoot } from 'react-dom/client';
import {App} from "./App.js";

customElements.define('my-element', MyElement);

const root = createRoot(document.getElementById('root'))
root.render(<App />);
export class MyElement extends HTMLElement {
  constructor() {
    super();
    // 初始化为元素时
    // 此处的值将被 React 覆盖
    this.value = undefined;
  }

  connectedCallback() {
    this.innerHTML = this.value.join(", ");
  }
}
export function App() {
  return <my-element value={[1,2,3]}></my-element>
}

监听自定义元素上的事件 {/custom-element-events/}

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

import {MyElement} from './MyElement.js';
import { createRoot } from 'react-dom/client';
import {App} from "./App.js";

customElements.define('my-element', MyElement);

const root = createRoot(document.getElementById('root'))
root.render(<App />);
export class MyElement extends HTMLElement {
  constructor() {
    super();
    this.test = undefined;
    this.emitEvent = this._emitEvent.bind(this);
  }

  _emitEvent() {
    const event = new CustomEvent('speak', {
      detail: {
        message: 'Hello, world!',
      },
    });
    this.dispatchEvent(event);
  }

  connectedCallback() {
    this.el = document.createElement('button');
    this.el.innerText = 'Say hi';
    this.el.addEventListener('click', this.emitEvent);
    this.appendChild(this.el);
  }

  disconnectedCallback() {
    this.el.removeEventListener('click', this.emitEvent);
  }
}
export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

事件区分大小写，并支持破折号（-）。在监听自定义元素事件时，请保留事件的大小写并包含所有破折号：

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

所有 SVG 组件 {/all-svg-components/}

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。