class проти className у React 16


84

Я побачив, що React 16 дозволяє передавати атрибути до DOM. Отже, це означає, що 'class' можна використовувати замість className, так?

Мені просто цікаво, чи є переваги у використанні className перед класом, крім того, що він сумісний із попередніми версіями React.


className - єдиний підтримуваний атрибут, але у версії 16 відбулася зміна для "Відомих атрибутів з іншим канонічним іменем React". У v15 React попереджає та ігнорує їх, у v16 попереджає, але перетворює значення у рядки та передає їх. Документація дає чітку відповідь на ваше запитання: "завжди використовуйте канонічне найменування React для всіх підтримуваних атрибутів". Див. Responsejs.org/blog/2017/09/08/…
lifeisfoo

Відповіді:


107

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.


Привіт, Султан. не могли б ви пояснити свою відповідь ще трохи? Чому клас є ключовим словом у javascript, щоб зробити className переважною практикою?
Девід А. Френч

1
@ DavidA.Французька Розгорнута відповідь. Будь ласка, перегляньте також інші відповіді.
Султан

1
Щиро дякую Султану! це було дуже корисно.
Девід А. Френч,

2
props.class = 'css' це цілком справедливо
daGo

31

Команда React насправді збирається перейти на class замість цього className в майбутньому ( джерело ):

  • classNameclass( # 4331 , див. Також # 13525 (коментар) нижче). Це пропонувалося незліченна кількість разів. Ми вже дозволяємо передавати клас на вузол DOM у React 16. Плутанина, яку це створює, не варта обмежень синтаксису, від яких вона намагається захистити.

Чому перемикання, а не підтримка обох?

Якщо ми підтримаємо обидва без попереджень, тоді спільнота розділить, яке саме використовувати. Кожен компонент в npm, який приймає опис класу, повинен пам’ятати про пересилання обох. Якщо навіть один компонент посередині не грає і реалізує лише один реквізит, клас загубиться - або ви ризикуєте опинитися classі classNameвнизу "не погодитись" між собою, і React не зможе вирішити цей конфлікт. Тому ми вважаємо, що це було б гірше, ніж статус-кво, і хочемо цього уникнути.

Тож вам слід стежити за оновленнями.
Я б все ще використовував className, поки саме цього очікує API.


4
Здається, це вже не так. См (кінець): github.com/facebook/react/pull/10169
machineghost

2
@machineghost # 13525 (здійснити перехід) було відкрито 31 серпня 2018 р. З іншого боку, № 10169 було закрито 4 серпня 2017 р. Тому я думаю, що це все ще актуально.
Maor Refaeli

3
Це не актуально. Вони зрозуміли, що classїх не можна використовувати у багатьох виразах, оскільки це ключове слово.
Султан

16

Просто, щоб пролити трохи більше світла, на додаток до інших вже даних хороших відповідей:

Ви помітите, що 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).


8

Документи 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.

1
Чому він робить цю рекомендацію?
Девід А. Френч


3

Клас у порівнянні з className у ReactJS Клас є зарезервованим словом або ключовим словом у ReactJS стільки, скільки функція знаходиться в javascript. Ось чому ми використовуємо слово "className" для позначення класу.


2

Реального пояснення команди React цьому немає, але можна вважати, що воно відрізняється від зарезервованого ключового слова "клас" у Javascript з моменту його введення в ES2015 +.

Навіть якщо ви використовуєте "клас" у конфігурації елемента під час створення елемента, це не призведе до помилки компіляції / рендерингу.


2

У ReactJS ми маємо справу з JSX, а не з HTML, як ви всі знаєте. JSX хоче, щоб ви використовували className, оскільки це базовий API DOM для JavaScript! class є зарезервованим ключовим словом у JS - це не основна причина, чому ми не використовуємо class, а замість цього використовуємо className. Це тому, що ми маємо на увазі цей DOM API

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.