Estoy comenzando un nuevo proyecto en el que estoy usando Flask + React + Bootstrap, pero Bootstrap dentro de JSX no funciona por alguna razón.
Estoy usando gulp-react para transformar JSX en JS.
Aquí está el JSX (literalmente, un ejemplo del sitio web de arranque):
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') );y el JS transformado:
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') ); Cuando copio y pego el HTML en la plantilla HTML, todo aparece como se esperaba. Cuando reemplazo Example.render con un simple <h1>Text</h1> , también funciona bien.
¿Cual podría ser el problema?
Cuando escribimos JSX, todavía estamos escribiendo en JavaScript, solo que con una sintaxis diferente. En JavaScript, 'clase' es una palabra clave, lo que significa que no podemos usar 'clase' a menos que estemos tratando de definir una. Entonces, para solucionar esto, debe reemplazar 'clase' con 'className' como tal:
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') );Sin embargo, en sus archivos .html, no usaría 'className', solo sería 'class' como estaba tratando de hacer originalmente.