Когда я должен использовать 'className' над 'class' и наоборот в реакции?

Question

Я делаю свое первое приложение реагирования, и я столкнулся с чем-то интересным, иногда я использую className более class в реакции. Мне просто интересно, взаимозаменяемы ли они или это так по какой-то причине? Я также замечаю, что когда я использую class, консоль проверяющих элементов спрашивает меня, имел ли я в виду className, ошибок нет, просто спрашивает.

Заранее спасибо!

Answer 1

В соответствии с реакцией документы :

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

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

Если вы используете class в качестве атрибута, он передается без какой-либо проверки в базовый элемент dom, но это не предпочтительный подход. className - это атрибут, который понимается по реагированию.

В рекомендациях React doc рекомендуется использовать имена cannonical React attribute вместо обычных имен Javascript, поэтому даже когда React разрешает передачу атрибутов в DOM, он выдаст вам предупреждение.

Answer 2

Это еще одна «функция» распознавания неизвестных атрибутов DOM.

В прошлом React игнорировал неизвестные атрибуты DOM. Если вы написали JSX с атрибутом, который React не распознает, React просто пропустит его.

Он изменился с React 16 и выдает предупреждение. То, как вы используете компоненты DOM в React, не изменилось, но теперь у вас есть некоторые новые возможности.

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

Что касается className:

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

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

См. Указание атрибутов с помощью JSX :

Поскольку JSX ближе к JavaScript, чем к HTML, React DOM использует соглашение об именовании свойств camelCase вместо HTML имена атрибутов.

Например, класс становится className в JSX, а tabindex становится tabIndex.