Website-Suche

javascript - Warnung: Unbekannte DOM-Eigenschaft class. Meinten Sie className?

Ich habe gerade angefangen, React zu erkunden, indem ich eine Komponente mit einer einfachen Render-Funktion hinzugefügt habe:

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

Wenn ich die App starte, erhalte ich den folgenden Fehler:

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

Ich kann dies lösen, indem ich class in className ändere.

Die Frage ist: Erzwingt React diese Konvention? Und warum muss ich className anstelle des herkömmlichen class verwenden? Wenn dies eine Einschränkung ist, liegt es dann an der JSX-Syntax oder an einem anderen Grund?

Antwort #1

Ja, es ist eine React-Konvention:

Da JSX JavaScript ist, werden Bezeichner wie class und for als XML-Attributnamen nicht empfohlen. Stattdessen erwarten React-DOM-Komponenten DOM-Eigenschaftsnamen wie className bzw. htmlFor.

JSX im Detail.

Antwort #2

In React.js gibt es keine for- und Klassen-Eigenschaften, daher müssen wir verwenden

for   --> htmlFor
class --> className

Antwort #3

Meteor verwendet Babel, um ES5 in ES6 (ES2015) zu transpilen, sodass wir es wie eine normale Node-Anwendung mit hinzugefügtem Babel-Transpiler behandeln können.

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

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

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

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

Antwort #4

In HTML verwenden wir

class="navbar"

aber in React und ReactNative gibt es kein HTML, wir verwenden hier JSX (Javascript XML)

className="navbar"

Verwandte Artikel