Question

我正在开始一个新项目，我正在使用Flask + React + Bootstrap，但JSX中的Bootstrap由于某种原因无效。

我正在使用gulp-react将JSX转换为JS。

这是JSX（字面意思是来自bootstrap网站的一个例子）：

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＆＃39; class＆＃39;是关键字，这意味着我们无法使用＆＃39; class＆＃39;除非我们真的试图定义一个。所以要解决这个问题，你必须更换“课程”。与＆＃39; className＆＃39;就这样：

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文件中，您不会使用＆＃39; className＆＃39;，它只是＆＃39; class＆＃39;就像你原本想做的那样。

React不使用Bootstrap

1 个答案: