4.5 DOM Elements

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

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

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

4.5.1.1 checked

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

4.5.1.2 className

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

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

4.5.1.3 dangerouslySetInnerHTML

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

    
  function CustomComponent() {
    return <div dangerouslySetInnerHTML={{__html: 'Символ левой скобки тега: <'}} />;
  }
  

4.5.1.4 htmlFor

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

4.5.1.5 onChange

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

4.5.1.6 selected

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

4.5.1.7 style

Атрибут style принимает объект JavaScript с свойствами в «верблюжьей нотации», а строкой CSS. Это соответствует DOM JavaScript свойству style, является более эффективным и предотвращает дыры в безопасности XSS. Например:

    
  const dangerStyle = {
    color: 'black',
    backgroundColor: 'red',
  };

  function AlertComponent() {
    return <h1 style={dangerStyle}>Важное сообщение!</h1>;
  }
  

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

    
  const transitionStyle = {
    WebkitTransition: 'all', // первая буква должна быть заглавной
    msTransition: 'all' // 'ms' - только этот префикс в нижнем регистре
  };

  function MyComponent() {
    return <div style={transitionStyle}>Это будет работать на разных браузерах</div>;
  }
  

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

Начиная с React 16 к определенным встроенным свойствам стиля автоматически добавится суффикс px. Например:

    
  // Результирующий стиль: '10px'
  <div style={{ height: 10 }}>
    Hello World!
  </div>;

  // Результирующий стиль: '10%'
  <div style="height: 10%;">
    Hello World!
  </div>
  

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

4.5.1.8 suppressContentEditableWarning

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

4.5.1.9 suppressHydrationWarning

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

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

4.5.1.10 value

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

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

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

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

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

Атрибуты DOM, поддерживаемые React:

    
  accept acceptCharset accessKey action allowFullScreen allowTransparency alt
  async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
  charSet checked cite classID className colSpan cols content contentEditable
  contextMenu controls 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
  

В версиях меньше 16, поддерживаются следующие RDFa атрибуты (несколько атрибутов RDFa перекрываются со стандартными атрибутами HTML и поэтому исключены из этого списка):

    
  about datatype inlist prefix property resource typeof vocab
  

В версиях меньше 16, поддерживаются следующие нестандартные атрибуты:

• autoCapitalize autoCorrect для Mobile Safari.
• color для <link rel="mask-icon" /> в Safari.
• itemProp itemScope itemType itemRef itemID для HTML5 microdata .
• security для более старых версий Internet Explorer.
• unselectable для Internet Explorer.
• results autoSave для полей ввода WebKit / Blink типа search.

React поддерживает следующие атрибуты 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