Ostrzeżenie: nieznana klasa właściwości DOM. Czy chodziło Ci o className?

Właśnie zacząłem poznawać Reacta, dodając komponent z prostą funkcją renderującą:

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

Po uruchomieniu aplikacji pojawia się następujący błąd:

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

Mogę to rozwiązać, zmieniając class na className.

Pytanie brzmi; czy React egzekwuje tę konwencję? Dlaczego muszę używać classNamezamiast konwencjonalnych class? Jeśli jest to ograniczenie, to czy wynika to ze składni JSX, czy z innego powodu?

Tak, to konwencja React:

Ponieważ JSX to JavaScript, identyfikatory takie jak classi nie forsą zalecane jako nazwy atrybutów XML. Zamiast React DOM elementy oczekiwać nazwy właściwości DOM, jak classNamei htmlForodpowiednio.

JSX w głębi .

Meteor używa babel do transpilacji ES5 do ES6 (ES2015), więc możemy sobie z nim poradzić jak z normalną aplikacją Node z dodanym transpilerem babel.

Musisz dodać .babelrcplik do folderu głównego projektu i dodać następujące elementy

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

I oczywiście musisz zainstalować tę wtyczkę za pomocą npm:

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

W React.js nie ma dostępnych właściwości for i class, więc musimy ich użyć

for   --> htmlFor
class --> className

Nie możesz użyć klasy dla żadnego atrybutu tagu HTML, ponieważ JS ma inne znaczenie klasy. Dlatego musisz użyć className zamiast class.

A także użyj atrybutu htmlFor zamiast for.

W HTML używamy

class="navbar"

ale w React i ReactNative nie ma HTML-a, używamy tutaj JSX (JavaScript XML)

className="navbar"

Składnia JSX po skompilowaniu za pomocą babel, podstawową składnią, której użyje do utworzenia elementu HTML, będzie

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

Jeśli użyjemy klasy zamiast className, reakcja wywnioskuje, że jest to klasa javascript zamiast atrybutu klasy html. [Powód, dla którego nazwa zmiennej „class” jest już używana w pliku do tworzenia klasy javascript i jest zarezerwowana do tego samego celu]. Co jest złe, a kompilator zgłasza błąd, ponieważ klasa javascript nie jest poprawną właściwością dla elementów HTML DOM.

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

Dlatego konieczne jest użycie className zamiast class.

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