Перейти к содержанию

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Все пропсы пользовательских элементов сериализуются в строки и всегда задаются с помощью атрибутов.
  • Пользовательские элементы принимают class, а не className, и for, а не htmlFor.

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

Будущая версия React будет включать более полную поддержку пользовательских элементов.

Вы можете попробовать это, обновив пакеты React до последней экспериментальной версии:

  • react@experimental
  • react-dom@experimental.

Экспериментальные версии React могут содержать ошибки. Не используйте их в производстве.

Все компоненты 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.

Ссылки

Комментарии