Компоненты React DOM

React поддерживает все встроенные в браузер компоненты HTML и SVG.

Общие компоненты

Все встроенные компоненты браузера поддерживают некоторые свойства и события.

Общие компоненты (например, <div>)

Сюда входят специфичные для React свойства, такие как ref и dangerouslySetInnerHTML.

Компоненты форм

Эти встроенные компоненты браузера принимают пользовательский ввод:

В React они особенные, поскольку передача им свойства value делает их управляемыми.

Компоненты ресурсов и метаданных

Эти встроенные компоненты браузера позволяют загружать внешние ресурсы или добавлять в документ метаданные:

В React они особенные, поскольку React может размещать их в заголовке документа, приостанавливать выполнение во время загрузки ресурсов и выполнять другие действия, описанные на справочной странице каждого компонента.

Все компоненты HTML

React поддерживает все встроенные компоненты HTML браузера. К ним относятся:

Примечание

Как и в стандарте DOM, React использует для имен свойств соглашение camelCase. Например, вместо tabindex нужно написать tabIndex. Преобразовать существующий HTML в JSX можно с помощью онлайн-конвертера.

Пользовательские HTML-элементы

Если вы выводите тег с дефисом, например <my-element>, React предполагает, что вы хотите вывести пользовательский HTML-элемент.

Если вы выводите встроенный HTML-элемент браузера с атрибутом is, он также будет считаться пользовательским элементом.

Задание значений пользовательским элементам

Передавать данные пользовательским элементам можно двумя способами:

Атрибуты: отображаются в разметке и могут принимать только строковые значения
Свойства: не отображаются в разметке и могут принимать произвольные значения JavaScript

По умолчанию React передаёт значения, привязанные в JSX, как атрибуты:

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

По умолчанию значения JavaScript, не являющиеся строками, передаваемые пользовательским элементам, будут сериализованы:

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

Однако React распознает свойство пользовательского элемента как свойство, которому можно передать произвольные значения, если имя этого свойства появляется в классе во время создания экземпляра:

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(", ");
  }
}

Прослушивание событий пользовательских элементов

При использовании пользовательских элементов часто возникает ситуация, когда они отправляют события CustomEvent, а не принимают функцию, вызываемую при возникновении события. Такие события можно прослушивать, используя префикс on при привязке к событию через JSX.

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

Все компоненты SVG

React поддерживает все встроенные компоненты SVG браузера. К ним относятся:

Примечание

Подобно стандарту DOM, React использует соглашение camelCase для имен свойств. Например, нужно писать tabIndex вместо tabindex. Преобразовать существующий SVG в JSX можно с помощью онлайн-конвертера.

Атрибуты с пространствами имён также необходимо записывать без двоеточия:

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.

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/reference/react-dom/components