Reagiere nicht mit Bootstrap

Question

Ich beginne ein neues Projekt, wo ich Flask + React + Bootstrap benutze, aber das Bootstrap innerhalb JSX funktioniert aus irgendeinem Grund nicht.

Ich benutze gulp-react um JSX in JS zu verwandeln.

ist die JSX (wörtlich: ein Beispiel aus Bootstrap-Website):

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') 
); 

und die transformierten 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') 
); 

Wenn ich den HTML-Code in die HTML-Vorlage kopieren und einfügen, alles erscheint wie erwartet. Wenn ich Example.render durch ein einfaches <h1>Text</h1> ersetze, macht es auch fein.

Was könnte das Problem sein?

Answer 1

Wenn wir JSX schreiben, schreiben wir immer noch in JavaScript, nur mit einer anderen Syntax. In JavaScript ist 'class' ein Schlüsselwort, was bedeutet, dass wir 'class' nicht verwenden können, wenn wir nicht gerade versuchen, einen zu definieren. Also, dies zu umgehen, müssen Sie ersetzen ‚class‘ mit ‚classname‘ als solche:

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') 
); 

In Ihren HTML-Dateien, aber würden Sie nicht ‚classname‘ verwenden, wäre es einfach sein ' Klasse 'wie du es ursprünglich versucht hast.