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

113

単純なレンダリング機能を持つコンポーネントを追加することで、Reactの探索を開始しました。

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

アプリを実行すると、次のエラーが発生します。

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

これをに変更classすることで解決できclassNameます。

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

javascript reactjs react-jsx

— ジャロネン
ソース

150

はい、そのReact規約：

JSXではJavaScriptですので、のような識別子classとは、forXMLの属性名と落胆しています。代わりに、React DOMコンポーネントは、classNameおよびのようなDOMプロパティ名をhtmlForそれぞれ期待します。

深さJSX。

— ヴィアチェスラフ
ソース

9

これはひどく直感的ではないと思います。パーサーは、コンテキストに基づいて2つの言語間でコンテキストを切り替える方法を知っている必要があると思います。プログラマーとツールに負担をかけないでください

— Jonathan

13

Meteorはbabelを使用してES5をES6（ES2015）にトランスパイルするため、babelトランスパイラーを追加した通常のNodeアプリケーションとして処理できます。

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

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

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

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

— 安全な曲線
ソース

ありがとう、react-facebook-loginをインストールした後、「無効なDOM」を修正できます。

— カカシ

12

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

for   --> htmlFor
class --> className

— KARTHIKEYAN.A
ソース

4

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

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

— ニミ・バーマ
ソース

3

HTMLでは

class="navbar"

しかし、ReactとReactNativeにはHTMLがないため、ここではJSX（Javascript XML）を使用します。

className="navbar"

— ムハンマドタラ
ソース

0

JSX構文は、babelを使用してコンパイルすると、HTML要素の作成に使用される基本的な構文になります。

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

classNameの代わりにクラスを使用すると、reactはそれをhtmlクラス属性ではなくjavascriptクラスとして推測します。[変数名 'class'がjavascriptクラスを作成するためにファイルですでに使用されており、同じ目的のために予約されている理由] javascriptクラスはhtml DOM要素の有効なプロパティではないため、どちらが間違っていてコンパイラがエラーをスローします。

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

したがって、クラスの代わりにclassNameを使用する必要があります。

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

— サシクマールM
ソース