Unetway

ReactJS - Элементы DOM

React реализует независимую от браузера DOM-систему для повышения производительности и совместимости с несколькими браузерами. Мы воспользовались возможностью, чтобы очистить несколько грубых краев в реализациях DOM браузера.

В React все свойства и атрибуты DOM (включая обработчики событий) должны быть camelCased. Например, атрибут HTML tabindexсоответствует атрибуту tabIndex в React. Исключение составляет aria-* и data-* атрибуты, которые должны быть уменьшены. Например, вы можете сохранить aria-label как aria-label.

Различия в атрибутах

Существует ряд атрибутов, которые работают по-разному между React и HTML:

checked

checked атрибут поддерживается <input> компонентами типа checkbox или radio. Вы можете использовать его, чтобы установить, проверен ли компонент. Это полезно для создания контролируемых компонентов. defaultChecked является неконтролируемым эквивалентом, который устанавливает, проверяется ли компонент, когда он впервые установлен.

className

Чтобы указать класс CSS, используйте className атрибут. Это относится ко всем регулярным DOM и SVG элементов , таких как <div>, <a> и другие.

Если вы используете React с веб-компонентами (что необычно), используйте class вместо этого атрибута.

dangerouslySetInnerHTML

dangerouslySetInnerHTML является заменой React для использования innerHTML в браузере DOM. В общем, установка HTML из кода является рискованным, потому что легко непреднамеренно подвергать пользователей атаке межсайтового скриптинга (XSS) . Таким образом, вы можете установить HTML непосредственно из React, но вам нужно набрать dangerouslySetInnerHTML и передать объект с помощью __html ключа, чтобы напомнить себе, что это опасно. Например:

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

htmlFor

Поскольку for это зарезервированное слово в JavaScript, htmlFor вместо этого используются элементы React.

onChange

onChange событие ведет себя , как можно было бы ожидать его: всякий раз , когда поле формы изменяется, то это событие. Мы намеренно не используем существующее поведение браузера, потому что onChangeоно является неправильным для его поведения, и React полагается на это событие для обработки ввода пользователя в реальном времени.

selected

selected атрибут поддерживается <option> компонентами. Вы можете использовать его, чтобы указать, выбран ли компонент. Это полезно для создания контролируемых компонентов.

style

Заметка:

Некоторые примеры использования документации style для удобства, но использование style атрибута в качестве основного средства стилизации элементов обычно не рекомендуется. В большинстве случаев className следует использовать ссылки на классы, определенные во внешней таблице стилей CSS. style чаще всего используется в приложениях React для добавления динамически вычисленных стилей во время рендеринга.

style атрибут принимает объект JavaScript со свойствами camelCased, а не строки CSS. Это согласуется с style свойством DOM JavaScript, является более эффективным и предотвращает дыры в безопасности XSS. Например:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Обратите внимание, что стили не являются автопривязанными. Чтобы поддерживать старые браузеры, вам необходимо предоставить соответствующие свойства стиля:

const divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}

Клавиши стиля являются camelCased, чтобы быть совместимыми с доступом к свойствам на узлах DOM из JS (например node.style.backgroundImage). Префиксы поставщиков, кромеms начального, должны начинаться с прописной буквы. Вот почему WebkitTransition имеет верхний регистр «W».

React автоматически добавит суффикс «px» к определенным числовым встроенным свойствам стиля. Если вы хотите использовать единицы, отличные от «px», укажите значение в виде строки с нужным устройством. Например:

// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

Однако не все свойства стиля преобразуются в пиксельные строки. Некоторые из них остаются безразмерных (например zoom, order, flex).

suppressContentEditableWarning

Обычно появляется предупреждение, когда элемент с дочерними элементами также помечен как contentEditable, потому что он не будет работать. Этот атрибут подавляет это предупреждение. Не используйте это, если вы не создаете библиотеку, например Draft.js, которая управляет contentEditable вручную.

suppressHydrationWarning

Если вы используете рендеринг Reaction на стороне сервера, обычно появляется предупреждение, когда сервер и клиент визуализируют разные контенты. Однако в некоторых редких случаях очень сложно или невозможно гарантировать точное соответствие. Например, ожидается, что метки времени будут отличаться на сервере и на клиенте.

Если вы установите suppressHydrationWarning значение true, React не будет предупреждать вас о несоответствиях в атрибутах и ​​содержании этого элемента. Он работает только на один уровень и предназначен для использования в качестве выходного люка. Не злоупотребляйте им.

value

value атрибут поддерживается <input> и <textarea> компоненты. Вы можете использовать его для установки значения компонента. Это полезно для создания контролируемых компонентов. defaultValue является неконтролируемым эквивалентом, который устанавливает значение компонента при его первом монтаже. 

Все поддерживаемые атрибуты HTML

Начиная с версии React 16, все стандартные или пользовательские атрибуты DOM полностью поддерживаются.

React всегда предоставлял JavaScript-ориентированный API для DOM. Поскольку компоненты React часто используют как пользовательские, так и DOM-связанные реквизиты, React использует camelCaseсоглашение так же, как API DOM:

<div tabIndex="-1" />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

Эти реквизиты работают аналогично соответствующим HTML-атрибутам, за исключением особых случаев, описанных выше. Некоторые атрибуты DOM, поддерживаемые React, включают:

accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap

Аналогично, все атрибуты SVG полностью поддерживаются:

accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesRequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

Вы также можете использовать пользовательские атрибуты, если они полностью строчные.