класс против className в React 16

Я видел, что React 16 позволяет передавать атрибуты в DOM. Значит, это означает, что вместо className можно использовать class, верно?

Мне просто интересно, есть ли преимущества в использовании className по сравнению с class, помимо обратной совместимости с предыдущими версиями React.

class- ключевое слово в javascript, а JSX - это расширение javascript. Это основная причина, по которой React использует classNameвместо class.

В этом отношении ничего не изменилось.

Чтобы расширить это еще немного. А ключевое слово означает , что знак имеет особое значение в синтаксисе языка. Например в:

class MyClass extends React.Class {

Токен classозначает, что следующий токен является идентификатором, а то, что следует за ним, является объявлением класса. См. Ключевые слова Javascript + Зарезервированные слова .

Тот факт, что токен является ключевым словом, означает, что мы не можем использовать его в некоторых выражениях, например

// invalid in older versions on Javascript, valid in modern javascript
const props = {
  class: 'css class'
}

// valid in all versions of Javascript
const props = {
 'class': 'css class'
};

// invalid!
var class = 'css';

// valid
var clazz = 'css';

// invalid!
props.class = 'css';

// valid
props['class'] = 'css';

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

Таких проблем нет с className.

Команда React фактически перейдет на, class а не className в ближайшем будущем ( источник ):

• className→ class( # 4331 , см. Также # 13525 (комментарий) ниже). Это предлагалось бесчисленное количество раз. Мы уже позволяем передавать класс в узел DOM в React 16. Путаница, которую это создает, не стоит тех ограничений синтаксиса, от которых он пытается защитить.

Почему переключение и отсутствие поддержки обоих?

Если мы поддержим оба без предупреждений, то сообщество разделится на то, какой из них использовать. Каждый компонент в npm, который принимает свойство класса, должен будет не забыть пересылать оба. Если даже один компонент в середине не подыгрывать и реализует только одну опору, класс потеряется - или вы рискуете в конечном итоге с classи classNameна дне «согласный» друг с другом, не имея возможности для React разрешить этот конфликт. Поэтому мы думаем, что это было бы хуже, чем статус-кво, и хотим этого избежать.

Так что следите за обновлениями.
Я бы все равно использовал, classNameпока этого ожидает API.

Просто чтобы пролить немного больше света на другие уже приведенные хорошие ответы:

Вы заметите, что React использует className вместо традиционного класса DOM. Из документации: «Поскольку JSX - это JavaScript, идентификаторы, такие как class и for, не приветствуются в качестве имен атрибутов XML. Вместо этого компоненты React DOM ожидают имен свойств DOM, таких как className и htmlFor, соответственно».

http://buildwithreact.com/tutorial/jsx

Кроме того, процитирую zpao (участник React / сотрудник facebook)

Наши компоненты DOM используют (в основном) JS API, поэтому мы решили использовать свойства JS (node.className, а не node.class).

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

Из документов:

Known attributes with a different canonical React name:

    <div tabindex="-1" />
    <div class="hi" />

React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.

с июня 2019 года процесс изменения className на class был остановлен, его можно будет продолжить позже

вот сообщение разработчика facebook, объясняющее, почему

https://github.com/facebook/react/issues/13525

Класс против className в reactJS Класс - это зарезервированное слово или ключевое слово в reactJS, как и функция в javascript. Вот почему мы используем слово «className» для обозначения класса.

Команда React не дает реального объяснения этому, но можно предположить, что оно отличается от зарезервированного ключевого слова «класс» в Javascript с момента его появления в ES2015 +.

Даже если вы используете «класс» в конфигурации элемента при создании элемента, это не вызовет никаких ошибок компиляции / рендеринга.

В ReactJS мы имеем дело с JSX, а не с HTML, как вы все знаете. JSX хочет, чтобы вы использовали className, потому что это базовый Javascript DOM API! Класс, являющийся зарезервированным ключевым словом в JS, не является основной причиной, по которой мы не используем class, а вместо этого используем className. Это потому, что мы говорим об этом DOM API