問題

私は現在、app.jsindex.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本体です:

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

  ベストアンサー

classはECMAScriptと競合する可能性があるため(予約されたキーワードです)、React開発者はclassの代わりにクラスのHTML要素の属性としてclassNameを使用することにしました。 Reactのドキュメント:

注: JSXはJavaScriptなので、クラスやforなどの識別子はXML属性名として推奨されません。代わりに、React DOMコンポーネントはそれぞれclassNameやhtmlForのようなDOMプロパティ名を期待しています。 ソース

forclassはECMAScript(JavaScriptが実装されている)の予約キーワードなので、XML属性名として使用することはできません。つまり、divinputなどのタグの属性を意味します。したがって、classNameを使用して、HTML要素のクラスを示します。適用可能な例は次のとおりです。

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

classの代わりにclassNameが使用されていることに注意してください。

  同じタグがついた質問を見る

javascriptreactjs