要素にクラスを描画しないようにしてください

Question

私は現在app.jsとindex.htmlという2つのファイルを持っています。いくつかのCSSクラスでフォームをレンダリングしようとすると、HTML要素は表示されますが、

これは私のapp.js：

var Form = React.createClass({ 
    handleClick: function() { 
     alert('click') 
    }, 
    render: function() { 
     return (
      <div> 
       <input class='form-control' type='text' name='list-name'/> 
       <button class="btn btn-primary" onClick={this.handleClick}>Submit</button> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<Form/>,document.getElementById('app')); 

これは私のHTML体である：あなたが 'className' のクラスからではないクラスを使用する必要が反応して

<div class="container"> 
    <h1>Title</h1> 
    <div id="app" class="center"></div> 
</div> 

Answer 1

のようになる（それは予約語です）、開発者が代わりにclassのクラスのためのHTML要素の属性としてclassNameを使用することを選択した反応します。

注：ドキュメントを反応させるのパーJSXはJavaScriptがあるので 、そのようなクラスなどとの識別子は、XML属性名として推奨されません。代わりに、React DOMコンポーネントはclassNameとhtmlForのようなDOMプロパティ名をそれぞれ必要とします。 forとclass以来Source

（JavaScriptが実装されている）のECMAScriptのキーワードが予約されている、彼らは、XMLの属性名として使用することはできません。つまり、divやinputなどのタグの属性を意味します。したがって、classNameを使用してHTML要素のクラスを示します。 classNameがclassの代わりに使用されていることを

return (
    <div> 
     <input className='form-control' type='text' name='list-name'/> 
     <button className="btn btn-primary" onClick={this.handleClick}>Submit</button> 
    </div> 
); 

注意：ここでは、適用例です。

Answer 2

予約JavaScriptの構文は次のとおりです。 classはECMAScriptのと競合する可能性があるため

はDIVのクラス名=「MyClassの」