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

114

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

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

Lorsque j'exécute l'application, j'obtiens l'erreur suivante:

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

Je peux résoudre ce problème en passant classà className.

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

javascript reactjs react-jsx

— jsalonen
source

151

Oui, c'est une convention React:

Puisque JSX est JavaScript, les identificateurs tels que classet forsont déconseillés en tant que noms d'attributs XML. Au lieu de cela, les composants DOM de React attendent des noms de propriétés DOM comme classNameet htmlFor, respectivement.

JSX en profondeur .

— Viacheslav
source

9

Je trouve cela terriblement peu intuitif. Je pense que l'analyseur devrait savoir comment basculer les contextes entre les deux langues en fonction du contexte, alléger le fardeau du programmeur et des outils

— Jonathan

13

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

Vous devez ajouter un .babelrcfichier au dossier racine de votre projet et ajouter les éléments suivants

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

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

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

— sécuriser
source

Merci, je peux réparer "DOM non valide" après l'installation de react-facebook-login.

— Kakashi

12

Dans React.js, il n'y a pas de propriétés for et class disponibles, nous devons donc utiliser

for   --> htmlFor
class --> className

— KARTHIKEYAN.A
source

4

Vous ne pouvez pas utiliser de 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 utilisez également l'attribut htmlFor au lieu de for.

— Nimmi Verma
source

3

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"

— Muhammad Talha
source

0

La syntaxe JSX lorsqu'elle est compilée à l'aide de babel, la syntaxe sous-jacente qu'elle utilisera pour créer l'élément HTML sera

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

Si nous utilisons la classe au lieu de className, la réaction l'inférera en tant que classe javascript au lieu d'attribut de classe html. [Raison pour laquelle le nom de variable 'class' est déjà utilisé dans le fichier pour créer une classe javascript et est réservé dans le même but]. Ce qui est faux et le compilateur lève l'erreur, car la classe javascript n'est pas une propriété valide pour les éléments DOM html.

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

Par conséquent, il est nécessaire d'utiliser className au lieu de class.

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

— Sasi Kumar M
source