Компоненты 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://react.dev/reference/react-dom/components
