{"componentChunkName":"component---src-templates-docs-js","path":"/docs/dom-elements.html","result":{"data":{"markdownRemark":{"html":"

React впроваджує незалежну від браузера систему DOM для продуктивності та сумісності між браузерами. Ми використали цю можливість, щоб згладити кілька гострих кутів у реалізації DOM у браузері.

\n

У React усі властивості й атрибути DOM (включно з обробниками подій) мають використовувати camelCase нотацію. Наприклад, атрибут HTML tabindex відповідає атрибуту tabIndex у React. Виключенням є лише aria-* та data-* атрибути, які будуть у нижньому регістрі. Наприклад, ви можете залишити aria-label як aria-label.

\n

Відмінності в атрибутах

\n

Є багато атрибутів які працюють по-різному в React та HTML:

\n

checked

\n

Атрибут checked підтримується у компонентах <input> типу checkbox та radio. Ви можете використати його, щоб зробити компонент вибраним. Це корисно для побудови контрольованих компонентів. defaultChecked — це неконтрольований еквівалент, який робить компонент вибраним коли той вперше було змонтовано.

\n

className

\n

Щоб визначити CSS-клас, слід використовувати атрибут className. Він застосовується з усіма звичайними DOM- та SVG-елементами, як <div>, <a> та інші.

\n

Якщо ви використовуєте React з веб-компонентами (що не є типовим), то натомість використовуйте атрибут class.

\n

dangerouslySetInnerHTML

\n

dangerouslySetInnerHTML — це React-альтернатива використання innerHTML в DOM браузера. Взагалі, вставка HTML-коду через JavaScript є ризикованою, бо можна ненавмисне наразити ваших користувачів на атаку міжсайтового скриптингу (XSS). Тож, ви можете використовувати вставку HTML-коду безпосередньо через React, але ви повинні використовувати dangerouslySetInnerHTML та передавати об’єкт з ключем __html, щоб нагадати самому собі, що це є небезпечним. Наприклад:

\n
function createMarkup() {\n  return {__html: 'First &middot; Second'};\n}\n\nfunction MyComponent() {\n  return <div dangerouslySetInnerHTML={createMarkup()} />;\n}
\n

htmlFor

\n

Оскільки for є зарезервованим словом у JavaScript, елементи React натомість використовують htmlFor.

\n

onChange

\n

Подія onChange веде себе так, як ви й очікували: вона буде запущена, коли змінюється поле форми. Ми навмисно не використовуємо існуючу поведінку браузера, оскільки onChange має неправильний принцип роботи і React покладається на цю подію, щоб опрацьовувати дані введені користувачем в реальному часі.

\n

selected

\n

Якщо ви хочете позначити <option> вибраним, посилайтеся на значення цієї опції в атрибуті value батьківського <select>.\nДивіться “Тег select” для отримання детальних інструкцій.

\n

style

\n
\n

Примітка

\n

Деякі приклади в документації використовують style для зручності, але використання атрибута style як основного засобу стилізації елементів, як правило, не рекомендується. У більшості випадків має використовуватися className для посилання на класи, визначені у зовнішній таблиці стилів CSS. style найчастіше використовується у програмах React для додавання динамічно-обчислювальних стилів під час рендеру. Див. також FAQ: Стилізація та CSS.

\n
\n

Атрибут style приймає JavaScript об’єкт з властивостями у camelCase нотації, а не рядки CSS. Це співвідносно з DOM властивістю style у JavaScript, але є більш ефективним та попереджає можливі XSS-дірки в безпеці. Наприклад:

\n
const divStyle = {\n  color: 'blue',\n  backgroundImage: 'url(' + imgUrl + ')',\n};\n\nfunction HelloWorldComponent() {\n  return <div style={divStyle}>Hello World!</div>;\n}
\n

Зауважте, що стилі не отримують префікси автоматично. Для підтримки старих браузерів ви маєте використовувати відповідні властивості стилів:

\n
const divStyle = {\n  WebkitTransition: 'all', // тут зверніть увагу на велику літеру 'W'\n  msTransition: 'all' // 'ms' — це єдиний вендорний префікс, що починається з малої літери\n};\n\nfunction ComponentWithTransition() {\n  return <div style={divStyle}>Це має працювати крос-браузерно</div>;\n}
\n

Стилі використовують нотацію camelCase, для забезпечення доступу до аналогічних властивостей DOM у JS (наприклад, node.style.backgroundImage). Вендорні префікси, окрім ms, мають починатися з великих літер. Ось чому WebkitTransition має велику літеру “W”.

\n

React автоматично додасть суфікс “px” до певних числових властивостей стилю. Якщо ви хочете використовувати одиниці, відмінні від “px”, вкажіть значення у вигляді рядка з бажаними одиницями вимірювання. Наприклад:

\n
// Стиль в результаті: '10px'\n<div style={{ height: 10 }}>\n  Hello World!\n</div>\n\n// Стиль в результаті: '10%'\n<div style={{ height: '10%' }}>\n  Привіт Світ!\n</div>
\n

Але не всі властивості стилів конвертуються до рядків з пікселями. Деякі залишаються без одиниць вимірювання (наприклад, zoom, order, flex). Повний список властивостей без одиниць вимірювання можете переглянути тут.

\n

suppressContentEditableWarning

\n

Зазвичай, існує попередження, коли елемент з дочірніми елементами позначений як contentEditable, оскільки це не спрацює. Цей атрибут пригнічує це попередження. Не використовуйте його, якщо ви не створюєте бібліотеку на кшталт Draft.js, яка керує contentEditable вручну.

\n

suppressHydrationWarning

\n

Якщо ви використовуєте серверний рендеринг React, зазвичай існує попередження, коли сервер і клієнт відтворюють відмінний вміст. Проте в деяких рідкісних випадках дуже важко або неможливо гарантувати точний збіг. Наприклад, очікується, що часові мітки будуть відрізнятися на сервері і на клієнті.

\n

Якщо ви встановите suppressHydrationWarning на true, React не попередить вас про невідповідності атрибутів і вмісту цього елемента. Він працює лише на одному рівні і призначений для використання в якості “аварійного виходу”. Будьте обережні з його використанням. Докладніше про гідратацію можна дізнатися в документації до ReactDOM.hydrate().

\n

value

\n

Атрибут value підтримується компонентами <input>, <select> та <textarea>. Ви можете використовувати його щоб встановити значення компоненту. Це корисно для побудови контрольованих компонентів. defaultValue — це неконтрольований еквівалент, який встановлює значення компоненту, коли той вперше було змонтовано.

\n

Усі підтримувані атрибути HTML

\n

Починаючи з React 16, будь-які стандартні атрибути DOM або атрибути користувача повністю підтримуються.

\n

React завжди надавав JavaScript-орієнтований API для DOM. Оскільки компоненти React часто містять як атрибути користувача, так і пов’язані з DOM пропси, React використовує camelCase конвенцію так само, як і DOM API:

\n
<div tabIndex=\"-1\" />      // Так само, як і node.tabIndex DOM API\n<div className=\"Button\" /> // Так само, як і node.className DOM API\n<input readOnly={true} />  // Так само, як і node.readOnly DOM API
\n

Ці пропси працюють подібно до відповідних атрибутів HTML, за винятком спеціальних випадків задокументованих вище.

\n

Деякі атрибути DOM, що підтримуються React, включають:

\n
accept 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
\n

Відповідно, усі атрибути SVG повністю підтримуються:

\n
accentHeight 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
\n

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

","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":[]}