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

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

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

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

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

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

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

Ответ 1

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

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

JSX в глубине.

Ответ 2

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

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

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

И, конечно же, вам нужно установить этот плагин с помощью npm:

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

Ответ 3

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

for   --> htmlFor
class --> className

Ответ 4

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

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

Ответ 5

В HTML мы используем

class="navbar"

но в React и ReactNative нет HTML, мы используем JSX (Javascript XML) здесь мы используем

className="navbar"