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无法读取它。

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

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

Answer 2

您可以使用＆＃34; DataTable＆＃34;这个问题的JavaScript功能。请参阅https://www.datatables.net/。

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

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

将jQuery插件Pagination.js与React一起使用

2 个答案: