Компоненты React DOM
Общие компоненты
Все встроенные браузерные компоненты поддерживают некоторые свойства и события.
Это включает в себя специфические для 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>
Примечание
Аналогично стандарту DOM, React использует соглашение camelCase для имён свойств. Например, вы напишете tabIndex вместо tabindex. Вы можете преобразовать существующий HTML в JSX с помощью онлайн-конвертера.
Пользовательские HTML-элементы
Если вы отображаете тег с дефисом, например <my-element>, React предположит, что вы хотите отобразить пользовательский HTML-элемент. В React отображение пользовательских элементов отличается от отображения встроенных тегов браузера:
- Все свойства пользовательских элементов сериализуются в строки и всегда устанавливаются с помощью атрибутов.
- Пользовательские элементы принимают
classвместоclassName, иforвместоhtmlFor.
Если вы отображаете встроенный HTML-элемент браузера с атрибутом is, он также будет обрабатываться как пользовательский элемент.
Примечание
В будущих версиях 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>
Примечание
Аналогично стандарту 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://18.react.dev/reference/react-dom/components
