Advertencia: clase de propiedad DOM desconocida. ¿Quiso decir className?


113

Acabo de comenzar a explorar React, agregando un componente con una función de renderizado simple:

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

Cuando ejecuto la aplicación, aparece el siguiente error:

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

Puedo resolver esto cambiando class a className.

La pregunta es; React hace cumplir esta convención? Además, ¿por qué necesito usar en classNamelugar del convencional class? Si esto es una restricción, ¿se debe a la sintaxis JSX o a algún otro lugar?

Respuestas:


150

Sí, es una convención de React:

Dado que JSX es JavaScript, los identificadores como classy no forse recomiendan como nombres de atributos XML. En cambio, los componentes de React DOM esperan nombres de propiedad DOM como classNamey htmlFor, respectivamente.

JSX en profundidad .


9
Encuentro esto terriblemente poco intuitivo. Creo que el analizador debería saber cómo cambiar contextos entre los dos lenguajes según el contexto, mantener la carga fuera del programador y en las herramientas
Jonathan

13

Meteor usa babel para transpilar ES5 a ES6 (ES2015), por lo que podemos tratarlo como una aplicación de nodo normal con el transpiler de babel agregado.

Debe agregar un .babelrcarchivo a la carpeta raíz de su proyecto y agregar los siguientes elementos

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

Y, por supuesto, debe instalar este complemento usando npm:

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


Gracias, puedo arreglar "DOM no válido" después de instalar react-facebook-login.
Kakashi

12

En React.js no hay propiedades de clase y for disponibles, por lo que debemos usar

for   --> htmlFor
class --> className

4

No puede usar class para ningún atributo de etiqueta HTML porque JS tiene otro significado de clase. Por eso tienes que usar className en lugar de class.

Y también use el atributo htmlFor en lugar de for.


3

En HTML usamos

class="navbar"

pero en React y ReactNative no hay HTML, usamos JSX (Javascript XML) aquí usamos

className="navbar"

0

La sintaxis JSX cuando se compila usando babel, la sintaxis subyacente que usará para crear el elemento HTML será

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

Si usamos la clase en lugar de className, la reacción la inferirá como clase javascript en lugar del atributo de clase html. [Razón por la que el nombre de la variable 'clase' ya se usa en el archivo para crear una clase javascript y está reservado para el mismo propósito]. Lo cual es incorrecto y el compilador arroja el error, ya que la clase javascript no es una propiedad válida para los elementos DOM de html.

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

Por tanto, es necesario utilizar className en lugar de class.

   React.createElement("p", {"className": "header"}, "Hello")
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.