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?
Oui, c'est une convention React:
Comme JSX est JavaScript, les identificateurs tels que
class
etfor
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 queclassName
ethtmlFor
, respectivement.
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
Dans React.js, il n’existe pas de propriétés for et class, nous devons donc utiliser
for --> htmlFor
class --> className
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.
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"