Попередження: Невідомий клас властивостей DOM. Ви мали на увазі className?

113

Я щойно почав досліджувати React, додавши компонент з простою функцією візуалізації:

render() {
  return <div class="myApp"></div>
}

Коли я запускаю програму, я отримую таку помилку:

Warning: Unknown DOM property class. Did you mean className?

Я можу вирішити це, змінивши classна className.

Питання в тому; чи реалізує Реактив цю конвенцію? Також чому мені потрібно використовувати classNameзамість звичайного class? Якщо це обмеження, то це пов’язано з синтаксисом JSX або десь ще?

javascript reactjs react-jsx

— jsalonen
джерело

150

Так, це Конвенція Реагу:

Оскільки JSX - це JavaScript, такі ідентифікатори, як classі forне відбиваються від імен атрибутів XML. Натомість компоненти React DOM очікують імен властивостей DOM, таких як classNameі htmlFor, відповідно.

JSX в глибину .

— В’ячеслав
джерело

9

Я вважаю це жахливо неінтуїтивним. Я думаю, що аналізатору слід знати, як перемикати контексти між двома мовами на основі контексту, не перевантажувати програміста та інструменти

— Джонатан

13

Meteor використовує babel для трансляції ES5 в ES6 (ES2015), тому ми можемо мати справу з цим як звичайний додаток Node із доданим вавилонським транспілером.

Вам потрібно додати .babelrcфайл до кореневої папки вашого проекту та додати наступні елементи

{
  "plugins": [
    "react-html-attrs"
  ]
}

І звичайно, вам потрібно встановити цей плагін, використовуючи npm:

npm install --save-dev babel-plugin-react-html-attrs

— забезпечити криву
джерело

Дякую, я можу виправити "Недійсний DOM" після встановлення react-facebook-login.

— Какаші

12

У React.js немає властивостей для та класів, тому нам потрібно використовувати

for   --> htmlFor
class --> className

— KARTHIKEYAN.A
джерело

4

Ви не можете використовувати клас для будь-якого атрибута HTML тегу, оскільки JS має інше значення класу. Ось чому вам доведеться використовувати className замість класу.

А також використовуйте атрибут htmlFor замість for.

— Німмі Верма
джерело

3

У HTML ми використовуємо

class="navbar"

але в React і ReactNative відсутній HTML, тут ми використовуємо JSX (Javascript XML)

className="navbar"

— Мухаммад Талха
джерело

0

Синтаксис JSX при компіляції за допомогою babel, основний синтаксис, який він буде використовувати для створення елемента HTML, буде

   React.createElement('div', {attributes}, "Hello");

Якщо ми будемо використовувати клас замість className, реагуючий буде робити це як javascript-клас замість атрибута html-класу. [Причина ім'я змінної 'class' вже використовується у файлі для створення класу javascript і зарезервовано для тієї ж мети]. Що неправильно, і компілятор видає помилку, оскільки клас JavaScript не є дійсним властивістю елементів HTML DOM.

   React.createElement("p", {"class": "header"}, "Hello");

Тому необхідно використовувати className замість класу.

   React.createElement("p", {"className": "header"}, "Hello")

— Сасі Кумар М
джерело