Avviso: classe di proprietà DOM sconosciuta. Volevi dire className?

Ho appena iniziato a esplorare React, aggiungendo un componente con una semplice funzione di rendering:

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

Quando eseguo l'app, ricevo il seguente errore:

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

Posso risolvere questo problema passando classa className.

La domanda è; React applica questa convenzione? Anche perché devo usare al classNameposto del convenzionale class? Se questa è una restrizione, è dovuta alla sintassi JSX o da qualche altra parte?

Sì, è una convenzione di React:

Poiché JSX è JavaScript, gli identificatori come classe forsono sconsigliati come nomi di attributi XML. Invece, i componenti DOM React si aspettano nomi di proprietà DOM come classNamee htmlFor, rispettivamente.

JSX in profondità .

Meteor utilizza babel per trasferire ES5 a ES6 (ES2015), quindi possiamo gestirlo come una normale applicazione Node con l'aggiunta di babel transpiler.

Devi aggiungere il .babelrcfile alla cartella principale del tuo progetto e aggiungere i seguenti elementi

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

E, naturalmente, è necessario installare questo plug-in utilizzando npm:

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

In React.js non sono disponibili proprietà for e class, quindi dobbiamo usare

for   --> htmlFor
class --> className

Non puoi usare class per nessun attributo di tag HTML perché JS ha un altro significato di classe. Ecco perché devi usare className invece di class.

E usa anche l'attributo htmlFor invece di for.

In HTML usiamo

class="navbar"

ma in React e ReactNative non c'è HTML, usiamo JSX (Javascript XML) qui usiamo

className="navbar"

La sintassi JSX quando compilata utilizzando babel, la sintassi sottostante che utilizzerà per creare l'elemento HTML sarà

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

Se usiamo la classe invece di className, la reazione la dedurrà come classe javascript invece che attributo classe html. [Motivo per cui il nome della variabile "classe" è già utilizzato nel file per creare una classe javascript ed è riservato per lo stesso scopo]. Il che è sbagliato e il compilatore genera l'errore, poiché la classe javascript non è una proprietà valida per gli elementi DOM HTML.

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

Quindi è necessario utilizzare className invece di class.

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