使用jQuery插件Pagination.js和React

我想在React中使用分頁插件。 jQuery中原來使用：使用jQuery插件Pagination.js和React

$('#demo').pagination({ 
    dataSource: [1, 2, 3, 4, 5, 6, 7, 8], 
    pageSize: 3, 
    callback: function (data, pagination) { 
     // template method of yourself 
     var html = template(data); 
     $("#dataContainer").html(html); 
    } 
});

我想在使用它反應了搜索功能。數據源將根據搜索結果進行更改。另外DOM包含的搜索結果會改變。

這是搜索結果的容器：

<MovieList data={this.state.searchList} handleAdd={this.addList}/>

searchList將作爲狀態更新。

這是MovieList組分：

var MovieList = React.createClass({ 

renderTemplate: function (data) { 
    return data.map(function (movie) { 
     return <Movie data={movie} onAdd={this.props.handleAdd}> 
     </Movie>; 
    }); 
}, 

componentDidMount: function() { 
    $(ReactDOM.findDOMNode(this)).pagination({ 
     dataSource: this.props.data, 
     pageSize: 6, 
     callback: function (data, pagination) { 
      // template method of yourself 
      var html = this.renderTemplate(data); 
      $(this.children).html(html); 
     } 
    }).bind(this); 
}, 

componentWillUnmount: function() { 

    $(ReactDOM.findDOMNode(this)).pagination('destroy'); 
}, 

render: function() { 
    return (
     <div className={this.props.className}> 
      <div className="data-container"></div> 
     </div> 
    ); 
}

}）;

之後將其綁定在componentDidMount，我應該用componentWillReceiveProps或其他生命週期的方法來更新它？

關注的問題：

我完全新的反應。我不知道如何使用React庫。從在線資源中，我發現我應該安裝React組件npm。我從來沒有用過npm。在我的項目中，我使用了Django + React。我也只使用經典的方法來包含這樣的參考：

<script src={% static 'pages/js/jquery-1.11.1.min.js' %}></script> 
<script src={% static 'pages/bootstrap/js/bootstrap.min.js' %}></script> 
<script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
<script src="https://unpkg.com/[email protected]/browser.min.js"></script>

我應該在哪裏安裝npm install React庫？如果我不想更改我的項目的當前結構，如何使用它？

來源

2016-10-03 JoyceLee

雖然我可以選擇一個陣營基於分頁庫，具有jQuery代碼進入了'componentWillReceiveProps'生命週期將使其工作，也許與jQuery代碼之前'if'語句，以便分頁是重新只有道具不同時才初始化。我不確定的一件事是，如果該模板渲染將與React一起使用，那麼當您使用jquery更新DOM時，您將會離開React環境。 – dzv3

我決定使用React庫。請看我的後續問題。謝謝！ – JoyceLee

這裏有一個有趣的[閱讀]（https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html），可以讓你開始使用純粹的React項目，直接來自React的創造者。 – dzv3

首先，你應該儘量避免React中的jquery。請仔細閱讀本文「http://tech.oyster.com/using-react-and-jquery-together/」

設置狀態將調用您的渲染方法，但狀態更新的屬性必須在渲染方法中設置。你的jquery代碼不知道更新的狀態，狀態值只不過是Movielist函數的一個屬性，而Jquery無法讀取它。

其次componentWillRecieveProps是在道具從父級或其他組件進行更新時調用的，它用於在調用render之前對set進行驗證或計算。

最後，您可以使用https://github.com/ultimate-pagination/react-ultimate-pagination進行分頁，它非常靈活適用於Bootstrap，MUI和其他幾個人，您也可以編寫自己的皮膚。

來源

2016-10-03 06:06:38

'this.state.searchList'是一個來自父組件的狀態對象，它將作爲一個道具傳遞給'MovieList'組件，觸發'componentWillReceiveProps'，但正如你所說，它不會工作，因爲他正在做DOM操作使用jQuery與節點React也在努力，例如'$（this.children）的.html'（HTML）。 – dzv3

我決定使用React庫。請看我的後續問題。謝謝！ – JoyceLee

對於反應，請嘗試並獲取Webpack之類的東西來設置單個JS，而不是手動添加庫。 –

您可以對此問題使用「DataTable」javascript功能。請參閱https://www.datatables.net/。

在這你只需要在下面的代碼中給你的表ID。

$(document).ready(function(){ 
    $('#myTable').DataTable(); 
});

來源

2016-10-03 06:18:35

使用jQuery插件Pagination.js和React

回答

相關問題