2015-01-16 108 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是一個組件,它使用正確的樣式呈現。

你沒有正確加載東西。