Skip to content

index.md

Latest commit

 

History

History
389 lines (320 loc) · 19.5 KB

index.md

File metadata and controls

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

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

通用组件 {/common-components/}

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

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

表单组件 {/form-components/}

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

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

Resource and Metadata Components {/resource-and-metadata-components/}

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

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 支持所有浏览器内置的组件，包括：

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

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

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

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

Setting values on custom elements {/attributes-vs-properties/}

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. Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values

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

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

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 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:

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();
    // The value here will be overwritten by React 
    // when initialized as an element
    this.value = undefined;
  }

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

Listening for events on custom elements {/custom-element-events/}

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.

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>
  )
}

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 组件，包括：

与 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。