Warnung: Unbekannte DOM-Eigenschaftsklasse. Meinten Sie className?

Ich habe gerade angefangen, React zu untersuchen, indem ich eine Komponente mit einer einfachen Renderfunktion hinzugefügt habe:

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

Wenn ich die App starte, wird folgende Fehlermeldung angezeigt:

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

Ich kann dies durch eine Änderung lösen classzu className.

Die Frage ist; setzt React diese Konvention durch? Auch warum muss ich classNameanstelle der herkömmlichen verwenden class? Wenn dies eine Einschränkung ist, liegt es dann an der JSX-Syntax oder an einem anderen Ort?

Ja, es ist eine Reaktionskonvention:

Da es sich bei JSX um JavaScript handelt, werden Bezeichner wie classund forals XML-Attributnamen nicht empfohlen. Stattdessen Reagieren DOM Komponenten DOM Eigenschaftsnamen erwarten wie classNameund htmlFordargestellt.

JSX im Detail .

Meteor verwendet babel, um ES5 auf ES6 (ES2015) zu transpilieren, sodass wir es als normale Knotenanwendung mit hinzugefügtem babel-Transpiler behandeln können.

Sie müssen eine .babelrcDatei zum Stammordner Ihres Projekts hinzufügen und die folgenden Elemente hinzufügen

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

Und natürlich müssen Sie dieses Plugin installieren mit npm:

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

In React.js sind keine for- und class-Eigenschaften verfügbar, daher müssen wir diese verwenden

for   --> htmlFor
class --> className

Sie können class nicht für HTML-Tag-Attribute verwenden, da JS eine andere Bedeutung für class hat. Deshalb müssen Sie className anstelle von class verwenden.

Verwenden Sie außerdem das Attribut htmlFor anstelle von for.

In HTML verwenden wir

class="navbar"

In React und ReactNative gibt es jedoch kein HTML. Wir verwenden hier JSX (Javascript XML)

className="navbar"

Die JSX-Syntax beim Kompilieren mit babel lautet die zugrunde liegende Syntax, die zum Erstellen des HTML-Elements verwendet wird

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

Wenn wir die Klasse anstelle von className verwenden, wird sie von der Reaktion als Javascript-Klasse anstelle des HTML-Klassenattributs abgeleitet. [Grund, warum der Variablenname 'Klasse' bereits in der Datei zum Erstellen einer Javascript-Klasse verwendet wird und für denselben Zweck reserviert ist]. Was falsch ist und der Compiler den Fehler auslöst, da die Javascript-Klasse keine gültige Eigenschaft für HTML-DOM-Elemente ist.

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

Daher ist es notwendig, className anstelle von class zu verwenden.

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