DOM Elements
React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations.
Differences In Attributes
There are a number of attributes that work differently between React and HTML:
To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like
If you use React with Web Components (which is uncommon), use the class attribute instead.
dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous. For example:
Since for is a reserved word in JavaScript, React elements use htmlFor instead.
The onChange event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because onChange is a misnomer for its behavior and React relies on this event to handle user input in real time.
If you want to mark an as selected, reference the value of that option in the value of its instead. Check out “The select Tag” for detailed instructions.
Some examples in the documentation use style for convenience, but using the style attribute as the primary means of styling elements is generally not recommended. In most cases, className should be used to reference classes defined in an external CSS stylesheet. style is most often used in React applications to add dynamically-computed styles at render time. See also FAQ: Styling and CSS.
The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:
Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:
Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. node.style.backgroundImage ). Vendor prefixes other than ms should begin with a capital letter. This is why WebkitTransition has an uppercase “W”.
React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit. For example:
If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client.
components. You can use it to set the value of the component. This is useful for building controlled components. defaultValue is the uncontrolled equivalent, which sets the value of the component when it is first mounted.
All Supported HTML Attributes
As of React 16, any standard or custom DOM attributes are fully supported.
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs:
These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
Some of the DOM attributes supported by React include:
Similarly, all SVG attributes are fully supported:
You may also use custom attributes as long as they’re fully lowercase.
DOM-элементы
React реализует независимую от браузера DOM-систему для повышения производительности и кроссбраузерной совместимости. Мы воспользовались возможностью, чтобы очистить несколько острых углов в реализациях DOM браузера.
Различия в атрибутах
Существует ряд атрибутов, которые работают по-разному в React и HTML:
dangerouslySetInnerHTML — это замена React для использования innerHTML в браузере DOM. В целом, установка HTML из кода является рискованным, потому что легко непреднамеренно подвергнуть ваших пользователей атаке «межсайтовый скриптинг» (cross-site scripting, XSS). Таким образом, вы можете задать HTML напрямую из React, использовав dangerouslySetInnerHTML и передать объект с помощью ключа __html для напоминая самому себя, что это опасно. Например:
Событие onChange ведёт себя так, как вы ожидали: каждый раз, когда изменяется поле формы, вызывается данное событие. Мы специально не используем существующее поведение браузера, потому что onChange является ошибочным для его поведения, и React полагается на это событие для обработки ввода пользователем в режиме реального времени.
Некоторые примеры в документации используют style для удобства, но использование атрибута style в качестве основного способа для стилизации элементов, как правило, не рекомендуется. В большинстве случаев className следует используется для указания классов, определённых во внешней таблице стилей CSS. style чаще всего используется в приложениях React для добавления динамических стилей, применяемых во время отрисовки. См. также FAQ: Стилизация и CSS.
Обратите внимание, что к стилям не добавляются браузерные префиксы. Чтобы поддерживать старые браузеры, вам необходимо задать соответствующие свойства для стиля:
Ключи стилей пишутся в стиле camelCase для совместимости с доступом к свойствам на DOM-узлах с JS-кода (например, node.style.backgroundImage ). Префиксы браузеров кроме ms начинаются с прописной буквы. Вот почему у WebkitTransition заглавная буква «W».
React автоматически добавит суффикс «px» к определённым числовым встроенным свойствам стиля. Если вы хотите использовать единицы, отличные от «px», укажите значение в виде строки с нужным единицей измерения. Например:
Если вы используете отрисовку React на стороне сервера, обычно появляется предупреждение, когда сервер и клиент отрисовывают разное содержимое. Однако в некоторых редких случаях очень сложно или невозможно гарантировать точное соответствие. Например, ожидается, что метки времени будут отличаться на сервере и на клиенте.
Атрибут value поддерживается компонентами и
. Вы можете использовать его для установки значения компонента. Это полезно для создания контролируемых компонентов. defaultValue — это неконтролируемый эквивалент, который устанавливает значение компонента при его первом монтировании.
Все поддерживаемые HTML-атрибуты
Начиная с React 16, все стандартные или пользовательские DOM-атрибуты полностью поддерживаются.
React всегда предоставлял JavaScript-ориентированный API для DOM. Поскольку компоненты React часто используют как пользовательские, так и связанные c DOM свойства, React следует соглашению по именованию camelCase так же, как API DOM:
Эти свойства работают аналогично соответствующим HTML-атрибутам, за исключением особых случаев, описанных выше.
Некоторые из атрибутов DOM, поддерживаемые React, включают:
Аналогично, все SVG-атрибуты полностью поддерживаются:
Вы также можете использовать пользовательские атрибуты, если они полностью написаны в нижнем регистре.
4.5 DOM Elements
React реализует независимую от браузера DOM-систему для повышения производительности и кросс-браузерной совместимости. Разработчики воспользовались возможностью избавиться от нескольких «шероховатостей» в браузерных реализациях DOM.
4.5.1 Отличия в атрибутах
Существует ряд атрибутов, которые работают по-разному в React и HTML:
4.5.1.1 checked
4.5.1.2 className
4.5.1.3 dangerouslySetInnerHTML
4.5.1.4 htmlFor
4.5.1.5 onChange
Событие onChange ведет себя так, как вы ожидаете: всякий раз, когда изменяется поле формы, это событие срабатывает. Типовое поведение браузера не используется намерено, потому что onChange работает неправильно в отношении своего текущего поведения. React полагается на это событие, чтобы обрабатывать ввод пользователя в реальном времени.
4.5.1.6 selected
4.5.1.7 style
Обратите внимание, что к стилям префиксы автоматически не добавляются. Чтобы поддерживать старые браузеры, вам необходимо предоставить соответствующие свойства стиля:
4.5.1.8 suppressContentEditableWarning
4.5.1.9 suppressHydrationWarning
Если вы используете отрисовку на стороне сервера, обычно появляется предупреждение, когда сервер и клиент отрисовывают разный контент. Однако в некоторых редких случаях очень сложно или невозможно гарантировать точное совпадение. Например, ожидается, что метки времени на сервере и на клиенте будут различаться.
4.5.1.10 value
Атрибут value поддерживается компонентами и
4.5.2 Все поддерживаемые HTML-атрибуты
Начиная с версии React 16, полностью поддерживаются все стандартные и пользовательские атрибуты DOM.
React всегда предоставлял JavaScript-ориентированный API для DOM. Поскольку компоненты React часто принимают как пользовательские, так и связанные с DOM свойства, React использует верблюжью нотацию так же, как DOM API:
Эти свойства работают аналогично соответствующим HTML-атрибутам, за исключением особых случаев, описанных выше.
Атрибуты DOM, поддерживаемые React:
В версиях меньше 16, поддерживаются следующие RDFa атрибуты (несколько атрибутов RDFa перекрываются со стандартными атрибутами HTML и поэтому исключены из этого списка):
В версиях меньше 16, поддерживаются следующие нестандартные атрибуты:
How to add label for attribute in react?
In this tutorial we are going to learn how to add for to label in React user forms.
React framework ignores for attribute for label element.
What does “for” attribute do in HTML tag?
React provides web accessibility guidelines to create a websites. It help us to navigate and access the page content by everyone. Labels are helpful to understand human readable text for each form input control and helps blind, keyboard and mouse users.
When you are creating an form in Html pages, You will create a label and input that bind together as seen below
Usually, labels are bound to input text using for attribute. Input control id is matched with for attribute of label. This applies to checkboxes,radio and select controls.
if you use the same code in React JSX, It breaks during component loading
and throws below error
React has no for property for labels. It defined htmlFor attribute
The reason is, you are writing html code in JSX syntax. JSX is a extension to javascript which executes javascript code. for is an keyword or reserved word in javascript. So we can not used directly
So we have to use htmlFor attribute like seen below
Note: React is case sensitive, first word letter is small and second letter work is capital Here is an react for label example component
Once this component is rendered, generated DOM contains for attribute instead of htmlFor attribute for an label When you inspect the code, You will see the below code
Различия jsx и html — JS: React
Хотя JSX и пытается быть похожим на HTML, у них все же есть некоторые отличия.
В JSX все свойства DOM и атрибуты (включая обработчики событий) должны быть записаны в camelCase. Например, атрибут tabindex превращается в tabIndex. Исключением являются атрибуты aria- и data-, они записываются точно так же, как и в обычном HTML.
htmlFor
Так как for – зарезервированное слово в JS, в React-элементах используется свойство htmlFor.
Экранирование
Обычный HTML не очень безопасен. Любой текст, который должен оставаться текстом, необходимо экранировать перед выводом. Иначе если внутри содержится HTML, то он будет проинтерпретирован. Ситуация может стать опасной, если этот текст на сайт добавляют сами пользователи.
JSX работает по-другому. Всё, что выводится обычным способом – безопасно по умолчанию и экранируется автоматически. А вот в тех местах, где этого не требуется, экранирование отключается так:
Стили
Совсем по-другому работает атрибут style. Если в HTML это обычная строка, то в JSX только объект.
Для консистентности с именами атрибутов, имена CSS-свойств также должны быть записаны в стиле camelCase.
Значение свойств по умолчанию
Примеры ниже эквивалентны:
При этом предпочтительным является первый вариант.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
