React не работает с Bootstrap

Question

Я начинаю новый проект, в котором я использую Flask + React + Bootstrap, но Bootstrap внутри JSX не работает по какой-либо причине.

Я использую gulp-response для преобразования 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 простым <h1>Text</h1>, он также отлично отображает.

В чем может быть проблема?

Answer 1

Когда мы пишем JSX, мы все еще пишем на JavaScript, просто с некоторым синтаксисом. В JavaScript «класс» - это ключевое слово, что означает, что мы не можем использовать «класс», если мы на самом деле не пытаемся его определить. Таким образом, чтобы решить эту проблему, вы должны заменить «класс» с «» Classname как таковой:

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

В ваших файлов .html, однако, вы бы не использовать «Classname», он бы просто " класс ", как вы пытались сделать изначально.