如何将此引导程序代码转换为react-bootstrap

Question

我正在评估react-bootstrap，想知道如何将以下引导代码转换为react-bootstrap

 <div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Answer 1

您不需要此代码的库react-bootstrap，该库可帮助您使用Modal或Accordion之类的引导组件。

无论如何，如果您确实需要通过React JS渲染该元素，只需更改React属性className的HTML class属性。

希望有帮助。

Answer 2

<div className="container-fluid">
    <div className="row-fluid">
      <div className="span2">
        /*Sidebar content*/
      </div>
      <div className="span10">
        /*Body content*/
      </div>
    </div>
  </div>

这就是您需要做的。 将“ class”替换为“ className”，然后将其插入React组件。

Answer 3

Facebook提供了JSX编译器来帮助您完成任务，因此请使用它！ 不要自己做，因为当使用不同的属性，样式时，有时需要手动更改很多内容…… https://facebook.github.io/react/html-jsx.html

结果如下：

  <div className="container-fluid">
        <div className="row-fluid">
          <div className="span2">
            {/*Sidebar content*/}
          </div>
          <div className="span10">
            {/*Body content*/}
          </div>
        </div>
      </div>

它甚至可以为您创建组件：

var NewComponent = React.createClass({
  render: function() {
    return (

      <div className="container-fluid">
        <div className="row-fluid">
          <div className="span2">
            {/*Sidebar content*/}
          </div>
          <div className="span10">
            {/*Body content*/}
          </div>
        </div>
      </div>
    );
  }
});