將jQuery Plugin Pagination.js與React結合使用

Question

我想在React中使用分頁插件。 最初在jQuery中使用：

$('#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);
    }
});

我想在React中使用它作為搜索功能。 數據源將根據搜索結果而變化。 另外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安裝React組件。 我從未使用過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/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

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

Answer 1

首先，您應該嘗試避免在React中使用jquery。 請通讀本文“ http://tech.oyster.com/using-react-and-jquery-together/ ”

設置狀態將調用您的render方法，但是必須在render方法中設置由狀態更新的屬性。 您的jquery代碼沒有意識到更新后的狀態，狀態值不過是Movielist函數上的一個屬性，而Jquery無法讀取它。

其次，當從父級或其他組件獲取道具更新時，將調用componentWillRecieveProps，它用於在調用渲染之前對集合進行驗證或計算。

最后，您可以使用https://github.com/ultimate-pagination/react-ultimate-pagination進行分頁，它與Bootstrap，MUI配合使用非常靈活，您也可以編寫自己的皮膚。

Answer 2

您可以使用“ DataTable” javascript功能來解決此問題。 請參考https://www.datatables.net/ 。

在這種情況下，您只需要在下面的代碼中提供表ID。

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