React реализует независимую от браузера систему DOM для повышения производительности и кроссбраузерной совместимости. Это позволило избавиться от некоторых шероховатостей в браузерных реализациях DOM.
\nВ React все свойства и атрибуты DOM (включая обработчики событий) должны быть в стиле camelCase. Например, HTML-атрибут tabindex соответствует атрибуту tabIndex в React. Исключение составляют атрибуты aria-* и data-*, которые следует писать в нижнем регистре. В частности, вы можете оставить aria-label как aria-label.
Есть ряд атрибутов, которые по-разному работают в React и HTML:
\nАтрибут checked поддерживается компонентами <input> типа checkbox или radio. Он нужен для того, чтобы узнать выбран ли компонент. Это полезно для создания управляемых компонентов. defaultChecked — это неуправляемый эквивалент, который определяет, выбран ли компонент на момент первого монтирования.
Чтобы указать класс CSS, используйте атрибут className. Это относится ко всем обычным элементам DOM и SVG, таким как <div>, <a> и т. д.
Если вы используете React с веб-компонентами (что встречается редко), используйте вместо этого атрибут class.
Свойству innerHTML в DOM браузера соответствует dangerouslySetInnerHTML в React. Как правило, вставка HTML из кода рискованна, так как можно случайно подвергнуть ваших пользователей атаке межсайтового скриптинга. Таким образом, вы можете вставить HTML непосредственно из React используя dangerouslySetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это небезопасно. Например:
function createMarkup() {\n return {__html: 'Первый · Второй'};\n}\n\nfunction MyComponent() {\n return <div dangerouslySetInnerHTML={createMarkup()} />;\n}Поскольку for является зарезервированным словом JavaScript, для определения HTML-атрибута for в элементах React вместо него используйте htmlFor.
Событие onChange ведёт себя ожидаемо: событие срабатывает при изменении поля формы. Мы намеренно не используем существующее поведение браузера, потому что имя onChange плохо передаёт, что происходит на самом деле. Вместо этого, React-реализация onChange опирается на браузерное событие для обработки ввода в реальном времени.
Если вы хотите отметить некоторый пункт списка <option> выделенным, задайте его значение в атрибуте value тега <select>.\nИзучите «Тег select» для получения подробных инструкций.
\n\nПримечание
\nНекоторые примеры в документации используют для удобства
\nstyle, но использование атрибутаstyleдля оформления элементов не рекомендуется. В большинстве случаев для ссылки на классы, определённые во внешнем CSS, следует использоватьclassName. Атрибутstyleв React чаще всего используется при добавлении динамически вычисляемых стилей во время рендера. Смотрите FAQ: Стилизация и CSS.
Атрибут style принимает JavaScript-объект со свойствами в camelCase вместо CSS-строк. Такой подход повышает эффективность и защищает от XSS. Например:
const divStyle = {\n color: 'blue',\n backgroundImage: 'url(' + imgUrl + ')',\n};\n\nfunction HelloWorldComponent() {\n return <div style={divStyle}>Привет, мир!</div>;\n}Обратите внимание, что браузерные префиксы не добавляются к стилям автоматически. Для поддержки старых браузеров необходимо добавить соответствующие свойства стиля:
\nconst divStyle = {\n WebkitTransition: 'all', // обратите внимание на заглавную букву W\n msTransition: 'all' // 'ms' — единственный префикс в нижнем регистре\n};\n\nfunction ComponentWithTransition() {\n return <div style={divStyle}>Это будет работать в разных браузерах</div>;\n}Ключи стилей записываются в camelCase для обеспечения доступа к аналогичным свойствам DOM из JS (например, node.style.backgroundImage). Префиксы браузера кроме ms должны начинаться с заглавной буквы. Вот почему WebkitTransition начинается с заглавной «W».
React автоматически добавит суффикс «px» к свойствам стилей с числовым значением. Если вы хотите использовать единицы измерения, отличные от «px», укажите значение в виде строки с желаемой единицей измерения. Например:
\n// Результат: '10px'\n<div style={{ height: 10 }}>\n Привет, мир!\n</div>\n\n// Результат: '10%'\n<div style={{ height: '10%' }}>\n Привет, мир!\n</div>Однако не все свойства стилей преобразуются в пиксельные строки. Некоторые из них остаются без единиц (например, zoom, order, flex). Полный список свойств без единиц измерения можно увидеть здесь.
Обычно, когда элемент с потомками помечен как contentEditable, появляется предупреждение, что он не будет работать. Данный атрибут скрывает это предупреждение. Поэтому используйте его, только если вы создаёте похожую на Draft.js библиотеку, которая управляет contentEditable вручную.
Если вы используете рендеринг React на стороне сервера и клиент с сервером рендерят разный контент, то как правило, об этом выдаётся предупреждение. Однако в редких случаях очень сложно или невозможно гарантировать точное совпадение. Например, ожидается, что временные метки будут различаться на сервере и на клиенте.
\nЕсли для suppressHydrationWarning установлено значение true, React не будет предупреждать вас о несоответствиях в атрибутах и содержимом этого элемента. Он работает только на один уровень глубины и предназначен для использования в качестве запасного решения. Не злоупотребляйте этим. Вы можете прочитать больше о гидратации на странице ReactDOM.hydrate().
Атрибут value поддерживается компонентами <input>, <select> и <textarea>. Он устанавливает значение компонента. Это полезно для создания управляемых компонентов. defaultValue — это неуправляемый эквивалент, который устанавливает значение компонента во время первого монтирования.
Начиная с React 16, полностью поддерживаются любые стандартные или пользовательские атрибуты DOM.
\nReact всегда предоставлял JavaScript-ориентированный API для DOM. Поскольку компоненты React часто принимают как пользовательские, так и связанные с DOM пропсы, React использует стиль camelCase так же, как DOM API:
<div tabIndex=\"-1\" /> // То же, что и node.tabIndex DOM API\n<div className=\"Button\" /> // То же, что и node.className DOM API\n<input readOnly={true} /> // То же, что и node.readOnly DOM APIЭти пропсы работают аналогично соответствующим атрибутам HTML, за исключением особых случаев, описанных выше.
\nНекоторые из атрибутов DOM, поддерживаемые React:
\naccept acceptCharset accessKey action allowFullScreen alt async autoComplete\nautoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked\ncite classID className colSpan cols content contentEditable contextMenu controls\ncontrolsList coords crossOrigin data dateTime default defer dir disabled\ndownload draggable encType form formAction formEncType formMethod formNoValidate\nformTarget frameBorder headers height hidden high href hrefLang htmlFor\nhttpEquiv icon id inputMode integrity is keyParams keyType kind label lang list\nloop low manifest marginHeight marginWidth max maxLength media mediaGroup method\nmin minLength multiple muted name noValidate nonce open optimum pattern\nplaceholder poster preload profile radioGroup readOnly rel required reversed\nrole rowSpan rows sandbox scope scoped scrolling seamless selected shape size\nsizes span spellCheck src srcDoc srcLang srcSet start step style summary\ntabIndex target title type useMap value width wmode wrapКроме того, полностью поддерживаются все SVG-атрибуты:
\naccentHeight accumulate additive alignmentBaseline allowReorder alphabetic\namplitude arabicForm ascent attributeName attributeType autoReverse azimuth\nbaseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight\nclip clipPath clipPathUnits clipRule colorInterpolation\ncolorInterpolationFilters colorProfile colorRendering contentScriptType\ncontentStyleType cursor cx cy d decelerate descent diffuseConstant direction\ndisplay divisor dominantBaseline dur dx dy edgeMode elevation enableBackground\nend exponent externalResourcesRequired fill fillOpacity fillRule filter\nfilterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize\nfontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy\ng1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef\ngradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic\nimageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength\nkerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor\nlimitingConeAngle local markerEnd markerHeight markerMid markerStart\nmarkerUnits markerWidth mask maskContentUnits maskUnits mathematical mode\nnumOctaves offset opacity operator order orient orientation origin overflow\noverlinePosition overlineThickness paintOrder panose1 pathLength\npatternContentUnits patternTransform patternUnits pointerEvents points\npointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits\nr radius refX refY renderingIntent repeatCount repeatDur requiredExtensions\nrequiredFeatures restart result rotate rx ry scale seed shapeRendering slope\nspacing specularConstant specularExponent speed spreadMethod startOffset\nstdDeviation stemh stemv stitchTiles stopColor stopOpacity\nstrikethroughPosition strikethroughThickness string stroke strokeDasharray\nstrokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity\nstrokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor\ntextDecoration textLength textRendering to transform u1 u2 underlinePosition\nunderlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic\nvHanging vIdeographic vMathematical values vectorEffect version vertAdvY\nvertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing\nwritingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole\nxlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase\nxmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPanВы также можете использовать пользовательские атрибуты, если они написаны в нижнем регистре.
","frontmatter":{"title":"Элементы DOM","next":null,"prev":null},"fields":{"path":"content/docs/reference-dom-elements.md","slug":"docs/dom-elements.html"}}},"pageContext":{"slug":"docs/dom-elements.html"}},"staticQueryHashes":[]}