Warnung: Unbekannte DOM-Eigenschaftsklasse. Meinten Sie className?

113

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?

javascript reactjs react-jsx

— jsalonen
quelle

150

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 .

— Viacheslav
quelle

9

Ich finde das schrecklich unintuitiv. Ich denke, der Parser sollte wissen, wie man Kontexte zwischen den beiden Sprachen basierend auf dem Kontext wechselt, den Programmierer und die Tools entlastet

— Jonathan

13

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

— sichere Kurve
quelle

Vielen Dank, ich kann "Invalid DOM" nach der Installation von react-facebook-login beheben.

— Kakashi

12

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

for   --> htmlFor
class --> className

— KARTHIKEYAN.A
quelle

4

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.

— Nimmi Verma
quelle

3

In HTML verwenden wir

class="navbar"

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

className="navbar"

— Muhammad Talha
quelle

0

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")

— Sasi Kumar M.
quelle