2015-01-16 64 views
-1

所以我目前正在编写一个项目,我在Flask中添加了Bootstrap。我最近开始添加一些反应组件,我想让它们看起来像其他引导组件。下面是我的一些代码:ReactBootstrap global is undefined

这是我包括我的bootstrap.js文件和文件react.js

<script src="/static/js/bootstrap.min.js"></script> 
    <script src="/static/js/build/react.js"></script> 
    <script src="/static/js/build/JSXTransformer.js"></script> 
    <script src="/static/js/react-bootstrap-bower/react-bootstrap.js"></script> 

这个网站通常是通过引导渲染成精彩的小图标,寻呼机,但不在反应:

return (
     <div> 
      <nav> 
       <ul className="pagination pagination-lg"> 
        <li> 
         <a href="#" aria-label="Previous"> 
          <span aria-hidden="true">&laquo;</span> 
         </a> 
        </li> 
        <li> 
         <a href="#" aria-label="Next"> 
          <span aria-hidden="true">&raquo;</span> 
         </a> 
        </li> 
       </ul> 
      </nav> 

我明白我没有把整个回报,返回不是手头上的问题,但是,它的造型。我尝试添加下面的传呼机元素

var Pager = ReactBootstrap.Pager; 
... 
//inside some html return 
<Pager></Pager> 

但我首先得到ReactBootstrap未定义的响应。然而我读过ReactBootstrap global是在你包含js文件时自动创建的。另一个回应是Pager不存在(显然是因为ReactBootstrap无法返回它)。

所以我的问题是,我可以简单地返回HTML没有data-reactid信息或以某种方式让它通过bootstrap呈现而不需要reactBootstrap?或者是否有我从我的文件中使用reactBootstrap缺少的东西。先谢谢您的帮助!

回答

0

我试图在jsbin中重现它,但ReactBootstrap.Pager是一个组件,它使用正确的样式呈现。

你没有正确加载东西。