Я видел, что React 16 позволяет передавать атрибуты в DOM. Таким образом, это означает, что вместо className можно использовать "класс", правильно?
Мне просто интересно, есть ли преимущества по-прежнему использовать className над классом, кроме того, чтобы быть обратно совместимым с предыдущими версиями 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, который принимает класс prop, должен помнить, чтобы переслать оба. Если хотя бы один компонент посередине не подыгрывает и реализует только одну опору, класс теряется - или вы рискуете оказаться с
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 имена cannonical React attribute а не обычные имена Javascript, поэтому даже когда React разрешает cannonical React attribute в 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.
Класс против className вactJS Класс - это зарезервированное слово или ключевое слово вactJS, равно как и функция в javascript. Вот почему мы используем слово "className" для ссылки на класс.
Команда React не дает никаких реальных объяснений этому вопросу, но можно предположить, что он отличается от зарезервированного ключевого слова "класс" в Javascript с момента его появления в ES2015+.
Даже если вы используете "класс" в конфигурации элемента при создании элемента, он не выдаст ошибку компиляции/рендеринга.
по состоянию на июнь 2019 г. процесс изменения className на class был остановлен, его можно продолжить позже
вот пост на фейсбуке разработчик объясняет почему