twitter-bootstrap - React无法与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模板中时，一切都会按预期显示。当我用简单的 <h1>Text</h1>替换Example.render时，它也可以正常显示。

可能是什么问题呢？

Answer 1

当我们编写JSX时，我们仍在用一些不同的语法编写JavaScript。在JavaScript中，“类”是一个关键字，这意味着除非实际尝试定义一个类，否则不能使用“类”。因此，要解决此问题，您必须将“ c​​lass”替换为“ 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”，就像您最初尝试的那样，它只是“ class”。