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

115

Я только начал изучать React, добавив компонент с простой функцией рендеринга:

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

Когда я запускаю приложение, я получаю следующую ошибку:

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

Я могу решить эту проблему, изменив classна className.

Вопрос в том; обеспечивает ли React соблюдение этого соглашения? Также зачем мне использовать classNameвместо обычного class? Если это ограничение, то это связано с синтаксисом JSX или чем-то еще?

javascript reactjs react-jsx

— jsalonen
источник

153

Да, это соглашение React:

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

JSX в деталях .

— Viacheslav
источник

9

Я нахожу это ужасно нелогичным. Я думаю, что синтаксический анализатор должен знать, как переключать контексты между двумя языками в зависимости от контекста, снимать нагрузку с программиста и на инструменты

— Джонатан

13

Meteor использует babel для преобразования ES5 в ES6 (ES2015), поэтому мы можем работать с ним как с обычным Node-приложением с добавленным транспилятором babel.

Вам нужно добавить .babelrcфайл в корневую папку вашего проекта и добавить следующие элементы

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

И, конечно же, вам необходимо установить этот плагин, используя npm:

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

— securecurve
источник

Спасибо, я могу исправить "Invalid DOM" после установки response-facebook-login.

— Какаши

12

В React.js нет доступных свойств for и class, поэтому нам нужно использовать

for   --> htmlFor
class --> className

— KARTHIKEYAN.A
источник

4

Вы не можете использовать класс для любого атрибута тега HTML, потому что JS имеет другое значение класса. Вот почему вам нужно использовать className вместо class.

А также используйте атрибут 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 вместо class.

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

— Саси Кумар М
источник