React (версия 16 и выше) дает полную поддержку как стандартных, так и пользовательских DOM-атрибутов. Это позволяет тебе работать с кучей разных свойств при создании компонентов.
React использует соглашение camelCase для атрибутов, что совпадает со стандартными DOM API. Это отличается от HTML-формата kebab-case и важно помнить, когда пишешь код на React.
Вот стандартные HTML-атрибуты и их эквиваленты в React:
tabIndex – управляет порядком фокуса элемента (эквивалент node.tabIndex)className – указывает CSS-классы (эквивалент node.className)readOnly – блокирует ввод пользователя (эквивалент node.readOnly)<div tabIndex="-1" />
<div className="Button" />
<input readOnly={true} />
Хотя большинство HTML-атрибутов напрямую соответствуют React-пропсам, есть особые случаи, где поведение отличается от стандартных DOM API. React прозрачно обрабатывает эти исключения, так что ты можешь сосредоточиться на разработке.
Кроме того, React предоставляет полную поддержку SVG-атрибутов, что позволяет легко встраивать масштабируемую векторную графику в твои приложения.
Поддержка атрибутов в React обширна и удобна для разработчика, позволяя тебе использовать как стандартные HTML-атрибуты, так и пользовательские пропсы без ограничений. Соглашение camelCase быстро становится привычкой, когда разберёшься с самыми частыми атрибутами.
React использует camelCase для наименования HTML-атрибутов, поэтому HTML-атрибут data-testid должен быть написан как dataTestId при передаче в качестве props в компоненты React.
Новый — ещё не проверен сообществом
Вы