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

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?

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 .

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

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

for   --> htmlFor
class --> className

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.

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"

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