使用 jQuery 插件 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

您可以使用“DataTable”javascript 功能来解决这个问题。请参考https://www.datatables.net/。

在此您只需要在下面的代码中提供您的表格 ID。

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

Answer 2

首先你应该尽量避免在 React 中使用 jquery。请通读这篇文章“http://tech.oyster.com/using-react-and-jquery-together/”

设置状态会调用你的渲染方法，但是状态更新的属性必须在渲染方法中设置。您的 jquery 代码不知道更新的状态，状态值不过是 Movielist 函数上的一个属性，而 Jquery 无法读取它。

其次，当 props 从父组件或其他组件更新时调用 componentWillRecieveProps，它用于在调用 render 之前对 set 进行验证或计算。

最后，您可以使用https://github.com/ultimate-pagination/react-ultimate-pagination 进行分页，它非常灵活地与 Bootstrap、MUI 和其他一些您可以编写自己的皮肤一起使用。