Компоненты React DOM¶
React поддерживает все встроенные в браузеры компоненты HTML и SVG.
Общие компоненты¶
Все встроенные компоненты браузера поддерживают некоторые параметры и события.
Сюда входят специфические для React пропсы, такие как ref и dangerouslySetInnerHTML.
Компоненты форм¶
Эти встроенные компоненты браузера принимают пользовательский ввод:
Они особенные в React, потому что передача им свойства value делает их управляемыми.
Компоненты ресурсов и метаданных¶
Эти компоненты браузера позволяют загружать внешние ресурсы или аннотировать документ метаданными:
Они особенные в React, потому что React может выводить их в шапку документа, приостанавливать загрузку ресурсов и выполнять другие действия, которые описаны на справочной странице для каждого конкретного компонента.
Все HTML-компоненты¶
React поддерживает все встроенные в браузер HTML-компоненты. К ним относятся:
<aside><audio><b><base><bdi><bdo><blockquote><body><br><button><canvas><caption><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><div><dl><dt><em><embed><fieldset><figcaption><figure><footer><form><h1><head><header><hgroup><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><meta><meter><nav><noscript><object><ol><optgroup><option><output><p><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><slot><small><source><span><strong><style><sub><summary><sup><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><u><ul><var><video><wbr>
camelCase для имен свойств
По аналогии со стандартом DOM React использует соглашение camelCase для имен свойств. Например, вы будете писать tabIndex вместо tabindex. Вы можете преобразовать существующий HTML в JSX с помощью онлайн-конвертера.
Пользовательские HTML-элементы¶
Если вы отображаете тег с тире, например <my-element>, React предположит, что вы хотите отобразить пользовательский HTML-элемент. В React отрисовка пользовательских элементов работает иначе, чем отрисовка встроенных тегов браузера:
- Все параметры пользовательских элементов сериализуются в строки и всегда задаются с помощью атрибутов.
- Пользовательские элементы принимают
class, а неclassName, иfor, а неhtmlFor.
Если вы отображаете встроенный HTML-элемент браузера с атрибутом is, он также будет рассматриваться как пользовательский элемент.
Пользовательские элементы в React
Будущая версия React будет включать более полную поддержку пользовательских элементов.
Вы можете попробовать это, обновив пакеты React до последней экспериментальной версии:
react@experimentalreact-dom@experimental
Экспериментальные версии React могут содержать ошибки. Не используйте их в производстве.
Все компоненты SVG¶
React поддерживает все встроенные в браузер SVG-компоненты. К ним относятся:
<a><animate><animateMotion><animateTransform><circle><clipPath><defs><desc><discard><ellipse><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feDistantLight><feDropShadow><feFlood><feFuncA><feFuncB><feFuncG><feFuncR><feGaussianBlur><feImage><feMerge><feMergeNode><feMorphology><feOffset><fePointLight><feSpecularLighting><feSpotLight><feTile><feTurbulence><filter><foreignObject><g><hatch><hatchpath><image><line><linearGradient><marker><mask><metadata><mpath><path><pattern><polygon><polyline><radialGradient><rect><script><set><stop><style><svg><switch><symbol><text><textPath><title><tspan><use><view>
camelCase для имен свойств
По аналогии со стандартом 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.
Источник — https://react.dev/reference/react-dom/components