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

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

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

Ответы на вопрос(4)

Решение Вопроса

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 claz,z = 'css';

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

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

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

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

 Sulthan19 февр. 2019 г., 17:38
@ DavidA.French Расширенный ответ. Пожалуйста, посмотрите также другие ответы.
 David A. French20 февр. 2019 г., 06:30
Большое спасибо, Султан! это было очень полезно.
 David A. French19 февр. 2019 г., 08:45
Привет, Султан. не могли бы вы объяснить ваш ответ немного больше? Почему класс, являющийся ключевым словом в javascript, делает className предпочтительной практикой?

поверх других хороших ответов, которые уже даны:

Вы заметите, что 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).

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

classNameclass (# 4331, смотрите также# 13525 (комментарий) ниже). Это было предложено бесчисленное количество раз. Мы уже разрешаем передавать класс на узел DOM в React 16. Это заблуждение не стоит ограничений синтаксиса, от которых он пытается защититься.

Почему переключение, а не поддержка обоих?

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

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

 Sulthan19 февр. 2019 г., 14:04
Это не актуально. Они понялиclass не может использоваться во многих выражениях, потому что это ключевое слово.
 Maor Refaeli06 дек. 2018 г., 10:01
@machineghost # 13525 (сделать переход) был открыт 31 августа 2018 года. С другой стороны, # 10169 был закрыт 4 августа 2017 года. Так что я думаю, что это все еще актуально.
 machineghost05 дек. 2018 г., 19:17
Это больше не похоже на случай. Смотрите (конец):github.com/facebook/react/pull/10169

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.
 David A. French19 февр. 2019 г., 08:45
Почему он делает эту рекомендацию, хотя?

Ваш ответ на вопрос