Twitter bootstrap 如何将此引导代码转换为反应引导

我正在评估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>

---

对于此代码，您不需要库react引导，此库可帮助您使用引导组件，如Modal或手风琴

无论如何，如果确实需要通过React JS呈现这些元素，只需更改React属性

className

的HTML

class

属性即可

希望有帮助

<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组件中。

Facebook提供了一个JSX编译器来帮助您完成任务，所以请使用它！ 不要自己去做，因为在使用不同的属性、样式时，有时需要手动进行很多更改。。。

结果如下：

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

var NewComponent=React.createClass({
render:function（）{
返回(
{/*侧边栏内容*/}
{/*正文内容*/}
);
}
});

您必须将类更改为适当的类