React DOM 组件
常用组件
¥Common components
所有内置的浏览器组件都支持一些属性和事件。
¥All of the built-in browser components support some props and events.
这包括 React 特定的属性，如 ref 和 dangerouslySetInnerHTML。
¥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:
自定义 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:
-
属性：哪些显示在标记中，并且只能设置为字符串值
¥Attributes: Which are displayed in markup and can only be set to string values
-
属性：哪些不会显示在标记中，并且可以设置为任意 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> ) }