単純なレンダリング機能を備えたコンポーネントを追加して、Reactの調査を開始しました。
render() {
return <div class="myApp"></div>
}
アプリを実行すると、次のエラーが表示されます。
Warning: Unknown DOM property class. Did you mean className?
これを解決するには、class
をclassName
に変更します。
質問は; Reactはこの規則を強制しますか?また、なぜ従来のclassName
の代わりにclass
を使用する必要があるのですか?これが制限である場合、それはJSX構文または他のどこかによるものですか?
はい、そのReact規則:
JSXはJavaScriptであるため、
class
やfor
などの識別子はXML属性名として推奨されません。代わりに、React DOMコンポーネントは、それぞれclassName
やhtmlFor
などのDOMプロパティ名を想定しています。
JSXの詳細 。
Meteorはbabelを使用してES5からES6(ES2015)にトランスパイルするため、通常のNodeアプリケーションとして扱い、バベルトランスパイラーを追加できます。
.babelrc
ファイルをプロジェクトのルートフォルダーに追加し、次の項目を追加する必要があります
{
"plugins": [
"react-html-attrs"
]
}
そしてもちろん、npm
を使用してこのプラグインをインストールする必要があります。
npm install --save-dev babel-plugin-react-html-attrs
React.jsでは、forおよびclassプロパティが利用できないため、使用する必要があります
for --> htmlFor
class --> className
JSにはクラスの別の意味があるため、HTMLタグ属性にクラスを使用することはできません。そのため、クラスの代わりにclassNameを使用する必要があります。
また、forの代わりにhtmlFor属性も使用します。
HTMLでは
class="navbar"
ただし、ReactおよびReactNativeにはHTMLはありません。ここでは、JSX(Javascript XML)を使用します
className="navbar"