Twitter bootstrap 反应不使用引导

我正在启动一个新项目，使用Flask+React+Bootstrap，但是JSX中的Bootstrap由于某种原因无法工作

我正在使用GulpReact将JSX转换为JS

以下是JSX（字面上是bootstrap网站的一个示例）：

当我将HTML复制并粘贴到HTML模板中时，所有内容都如预期的那样出现。当我用简单的

文本

替换Example.render时，它的渲染效果也很好

---

有什么问题吗？

当我们编写JSX时，我们仍然在用JavaScript编写，只是使用了一些不同的语法。在JavaScript中，“class”是一个关键字，这意味着我们不能使用“class”，除非我们真的试图定义一个。因此，要解决这个问题，您必须将“class”替换为“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')
);

var-Example=React.createClass({
渲染：（）=>{
返回(
@
)}
});
ReactDOM.render(
,
document.getElementById（'main'）
);

---

但是，在.html文件中，您不会使用“className”，它只是像您最初尝试使用的那样使用“class”。

您可能重复使用class而不是className。感谢您的回复，但由于某些原因，该问题并未得到解决。但是，仍然没有呈现任何内容。还要确保在HTML中包含引导样式表（来自内容分发网络（CDN）或文件系统上的副本）。我还忘了将“class”的第一个实例更改为“className”。因此，如果您复制并粘贴了我的代码，这只会影响您一个简单的问题：您的html

文档是否包含id为
main
的元素？
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')
);

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