Uyarı: Bilinmeyen DOM özelliği sınıfı. ClassName mi demek istediniz?

Basit bir oluşturma işlevine sahip bir bileşen ekleyerek React'i keşfetmeye yeni başladım:

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

Uygulamayı çalıştırdığımda şu hatayı alıyorum:

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

Ben değiştirerek bunu çözebilir classiçin className.

Soru; React bu sözleşmeyi uyguluyor mu? Ayrıca neden classNamegeleneksel yerine kullanmam gerekiyor class? Bu bir kısıtlamaysa, JSX sözdiziminden mi yoksa başka bir yerden mi kaynaklanıyor?

Evet, bu bir React kuralı:

JSX JavaScript olduğundan, gibi tanımlayıcılar classve forXML özelliği adları gibi tavsiye edilmez. Bunun yerine, React DOM bileşenleri , sırasıyla classNameve gibi DOM özellik adları bekler htmlFor.

JSX In Depth .

Meteor, ES5'ten ES6'ya (ES2015) aktarım yapmak için babel kullanıyor, bu yüzden babel aktarıcısı eklenmiş normal bir Node uygulaması olarak bununla başa çıkabiliriz.

Sen eklemeniz gerekir .babelrcprojenizin kök klasöre ve şu öğeler eklemek

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

Ve elbette, bu eklentiyi aşağıdakileri kullanarak yüklemeniz gerekir npm:

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

React.js'de for ve class özellikleri yoktur, bu yüzden kullanmamız gerekir

for   --> htmlFor
class --> className

JS'nin sınıfın başka bir anlamı olduğundan, herhangi bir HTML etiketi özelliği için class kullanamazsınız. Bu yüzden class yerine className kullanmanız gerekiyor.

Ayrıca for yerine htmlFor özniteliğini kullanın.

HTML'de kullanıyoruz

class="navbar"

ancak React ve ReactNative'de HTML yok, burada JSX (Javascript XML) kullanıyoruz

className="navbar"

JSX sözdizimi babel kullanılarak derlendiğinde, HTML öğesini oluşturmak için kullanacağı temel sözdizimi şu şekilde olacaktır:

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

ClassName yerine sınıfı kullanırsak, tepki onu html class özelliği yerine javascript sınıfı olarak çıkaracaktır. ['Class' değişken adının dosyada bir javascript sınıfı oluşturmak için zaten kullanılmış ve aynı amaç için ayrılmış olmasının nedeni]. Yanlış olan ve javascript sınıfı html DOM öğeleri için geçerli bir özellik olmadığından derleyici hata veriyor.

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

Bu nedenle class yerine className kullanmak gerekir.

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