React DOM Components

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.

Common components (e.g. <div>)

This includes React-specific props like ref and dangerouslySetInnerHTML.

Form components

These built-in browser components accept user input:

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:

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:

ملاحظة

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.

Custom HTML elements

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

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

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

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>

All SVG components

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

ملاحظة

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 becomes xlinkActuate.
xlink:arcrole becomes xlinkArcrole.
xlink:href becomes xlinkHref.
xlink:role becomes xlinkRole.
xlink:show becomes xlinkShow.
xlink:title becomes xlinkTitle.
xlink:type becomes xlinkType.
xml:base becomes xmlBase.
xml:lang becomes xmlLang.
xml:space becomes xmlSpace.
xmlns:xlink becomes xmlnsXlink.

السابقuseFormStatus

التاليCommon (e.g. <div>)

مرجع API

React DOM Components

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.

Common components (e.g. <div>)

This includes React-specific props like ref and dangerouslySetInnerHTML.

Form components

These built-in browser components accept user input:

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:

All HTML components

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

ملاحظة

Custom HTML elements

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

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

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

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

Fork

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

Fork

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

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>

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

All SVG components

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

ملاحظة

Namespaced attributes also have to be written without the colon:

xlink:actuate becomes xlinkActuate.
xlink:arcrole becomes xlinkArcrole.
xlink:href becomes xlinkHref.
xlink:role becomes xlinkRole.
xlink:show becomes xlinkShow.
xlink:title becomes xlinkTitle.
xlink:type becomes xlinkType.
xml:base becomes xmlBase.
xml:lang becomes xmlLang.
xml:space becomes xmlSpace.
xmlns:xlink becomes xmlnsXlink.

السابقuseFormStatus

التاليCommon (e.g. <div>)

React DOM Components

Common components

Form components

Resource and Metadata Components

All HTML components

ملاحظة

Custom HTML elements

Setting values on custom elements

Listening for events on custom elements

ملاحظة

All SVG components

ملاحظة

react@19.2

react-dom@19.2

React Compiler

React DevTools

eslint-plugin-react-hooks

قواعد React (Rules of React)

React Server Components

Legacy APIs

React DOM Components

Common components

Form components

Resource and Metadata Components

All HTML components

ملاحظة

Custom HTML elements

Setting values on custom elements

Listening for events on custom elements

ملاحظة

All SVG components

ملاحظة