web-dev-qa-db-fra.com

Avertissement: classe de propriété DOM inconnue. Voulez-vous dire className?

Je viens juste de commencer à explorer React en ajoutant un composant avec une fonction de rendu simple:

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

Lorsque je lance l'application, j'obtiens le message d'erreur suivant:

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

Je peux résoudre ce problème en remplaçant class par className.

La question est; Est-ce que React applique cette convention? Aussi, pourquoi dois-je utiliser className à la place du conventionnel class?? S'il s'agit d'une restriction, est-ce dû à JSX? syntaxe ou ailleurs?

javascriptreactjsreact-jsx
93
jsalonen

Oui, c'est une convention React:

Comme JSX est JavaScript, les identificateurs tels que class et for sont déconseillés en tant que noms d'attributs XML. Au lieu de cela, les composants React DOM attendent des noms de propriété DOM tels que className et htmlFor, respectivement.

JSX In Depth .

122
Viacheslav

Meteor utilise babel pour transpiler ES5 à ES6 (ES2015), nous pouvons donc le traiter comme une application normale Node) avec ajout de babel transpiler.

Vous devez ajouter .babelrc fichier dans le dossier racine de votre projet et ajoutez les éléments suivants

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

Et bien sûr, vous devez installer ce plugin en utilisant npm:

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

13
securecurve

Dans React.js, il n’existe pas de propriétés for et class, nous devons donc utiliser

for   --> htmlFor
class --> className
6
KARTHIKEYAN.A

Vous ne pouvez pas utiliser la classe pour un attribut de balise HTML, car JS a une autre signification de classe. C'est pourquoi vous devez utiliser className au lieu de class.

Et aussi utiliser l'attribut htmlFor au lieu de pour.

4
Nimmi Verma

En HTML, nous utilisons

class="navbar"

mais dans React et ReactNative il n'y a pas de HTML, nous utilisons JSX (Javascript XML) ici, nous utilisons

className="navbar"
0
Muhammad Talha