web-dev-qa-db-ja.com

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

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

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

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

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

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

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

javascriptreactjsreact-jsx
93
jsalonen

はい、そのReact規則：

JSXはJavaScriptであるため、classやforなどの識別子はXML属性名として推奨されません。代わりに、React DOMコンポーネントは、それぞれclassNameやhtmlForなどの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