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属性class的HTML className属性。

希望帮助。

Answer 2

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

这就是你需要做的一切。替换＆＃34; class＆＃34;使用＆＃34; className＆＃34;然后将其插入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>
    );
  }
});

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

3 个答案: