web-dev-qa-db-ja.com

警告:不明なDOMプロパティクラス。 classNameを意味しましたか?

単純なレンダリング機能を備えたコンポーネントを追加して、Reactの調査を開始しました。

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

アプリを実行すると、次のエラーが表示されます。

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

これを解決するには、classclassNameに変更します。

質問は; Reactはこの規則を強制しますか?また、なぜ従来のclassNameの代わりにclassを使用する必要があるのですか?これが制限である場合、それはJSX構文または他のどこかによるものですか?

93
jsalonen

はい、そのReact規則:

JSXはJavaScriptであるため、classforなどの識別子はXML属性名として推奨されません。代わりに、React DOMコンポーネントは、それぞれclassNamehtmlForなどのDOMプロパティ名を想定しています。

JSXの詳細

122
Viacheslav

Meteorはbabelを使用してES5からES6(ES2015)にトランスパイルするため、通常のNodeアプリケーションとして扱い、バベルトランスパイラーを追加できます。

.babelrcファイルをプロジェクトのルートフォルダーに追加し、次の項目を追加する必要があります

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

そしてもちろん、npmを使用してこのプラグインをインストールする必要があります。

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

13
securecurve

React.jsでは、forおよびclassプロパティが利用できないため、使用する必要があります

for   --> htmlFor
class --> className
6
KARTHIKEYAN.A

JSにはクラスの別の意味があるため、HTMLタグ属性にクラスを使用することはできません。そのため、クラスの代わりにclassNameを使用する必要があります。

また、forの代わりにhtmlFor属性も使用します。

4
Nimmi Verma

HTMLでは

class="navbar"

ただし、ReactおよびReactNativeにはHTMLはありません。ここでは、JSX(Javascript XML)を使用します

className="navbar"
0
Muhammad Talha