React working with Bootstrap

Question

私はFlask + React + Bootstrapを使用している新しいプロジェクトを開始していますが、何らかの理由でJSX内のBootstrapが機能しません。

gulp-reactを使用してJSXをJSに変換しています。ここで

はJSX（ブートストラップウェブサイトから文字通り一例）である。

var Example = React.createClass({ 
    render:() => { 
    return (
     <div class="input-group"> 
     <span class="input-group-addon" id="basic-addon1">@</span> 
     <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" /> 
     </div> 
    )} 
}); 

ReactDOM.render(
    <Example />, 
    document.getElementById('main') 
); 

と変換JS：

var Example = React.createClass({displayName: "Example", 
    render: function() { 
    return (
     React.createElement("div", {class: "input-group"}, 
     React.createElement("span", {class: "input-group-addon", id: "basic-addon1"}, "@"), 
     React.createElement("input", {type: "text", class: "form-control", placeholder: "Username", "aria-describedby": "basic-addon1"}) 
    ) 
    )} 
}); 

ReactDOM.render(
    React.createElement(Example, null), 
    document.getElementById('main') 
); 

私はコピーしてHTMLテンプレートにHTMLを貼り付けると、すべてが表示されます予想通り。 Example.renderを単純な0​​に置き換えると、それはうまく描画されます。

何が問題なのですか？

Answer 1

私たちはJSXを書くと、まだJavaScriptで書かれていますが、いくつかの構文が異なります。 JavaScriptでは 'class'はキーワードであり、実際に定義しようとしない限り 'class'を使用できません。だから、この問題を回避するために、あなたのような「className」の持つ「クラス」を交換することがあります。しかし、あなたがが「className」を使用することはありません、あなたの.htmlファイルに

var Example = React.createClass({ 
    render:() => { 
    return (
     <div className="input-group"> 
     <span className="input-group-addon" id="basic-addon1">@</span> 
     <input type="text" className="form-control" placeholder="Username" aria-describedby="basic-addon1" /> 
     </div> 
    )} 
}); 

ReactDOM.render(
    <Example />, 
    document.getElementById('main') 
); 

を、それだけで "だろうあなたが元々やっているように、クラス "を作成しました。