Movatterモバイル変換

[0]ホーム
URL:

Is this page useful?

React DOM Components

React supports all of the browser built-inHTML andSVG components.

Common components

All of the built-in browser components support some props and events.

This includes React-specific props likeref anddangerouslySetInnerHTML.

Form components

These built-in browser components accept user input:

They are special in React because passing thevalue prop to them makes themcontrolled.

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.

All HTML components

React supports all built-in browser HTML components. This includes:

Note

Similar to theDOM standard, React uses acamelCase convention for prop names. For example, you’ll writetabIndex instead oftabindex. You can convert existing HTML to JSX with anonline converter.

Custom HTML elements

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

If you render a built-in browser HTML element with anis 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. 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-elementvalue="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-elementvalue={[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:

Fork
exportclass MyElementextendsHTMLElement{constructor(){super();// The value here will be overwritten by React// when initialized as an elementthis.value =undefined;}connectedCallback(){this.innerHTML =this.value.join(", ");}}

Listening for events on custom elements

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

Fork
exportfunctionApp(){return(<my-elementonspeak={e=>console.log(e.detail.message)}></my-element>)}

Note

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-elementonsay-hi={console.log}></my-element>
// Listens for `sayHi` events
<my-elementonsayHi={console.log}></my-element>

All SVG components

React supports all built-in browser SVG components. This includes:

Note

Similar to theDOM standard, React uses acamelCase convention for prop names. For example, you’ll writetabIndex instead oftabindex. You can convert existing SVG to JSX with anonline converter.

Namespaced attributes also have to be written without the colon:

  • xlink:actuate becomesxlinkActuate.
  • xlink:arcrole becomesxlinkArcrole.
  • xlink:href becomesxlinkHref.
  • xlink:role becomesxlinkRole.
  • xlink:show becomesxlinkShow.
  • xlink:title becomesxlinkTitle.
  • xlink:type becomesxlinkType.
  • xml:base becomesxmlBase.
  • xml:lang becomesxmlLang.
  • xml:space becomesxmlSpace.
  • xmlns:xlink becomesxmlnsXlink.
[8]ページ先頭
©2009-2025 Movatter.jp