Javascript 如何与React JS一起在UI中进行无限滚动？

现在我正在显示从Mysql DB到前端的所有行，并且我正在使用React JS作为我项目的一部分。我为之着迷

1） 如何使用hibernate从Mysql数据库中获取前10行、后10行、后10行，直到最后一行

2） 滚动10行后，如何在UI中调用ajax调用

我现在使用的React JS代码

<script type="text/babel">
         var CommentBox = React.createClass({
                                         loadCommentsFromServer: function(){
                                         $.ajax({
                                                url:this.props.url,
                                                dataType: 'json',
                                                cache: false,
                                                success:  function(data){
                                                this.setState({data: data});
                                                }.bind(this),
                                                error: function(xhr, status, err){
                                                console.error(this.props.url, status, err.toString());
                                                }.bind(this)

                                                });
                                         },

          getInitialState: function(){
              return {data: []};
          },
                                         componentDidMount: function(){
                                            this.loadCommentsFromServer();
                                            setInterval(this.loadCommentsFromServer, this.props.pollInterval);
                                         },
          render: function(){
              return (
                  <div className="commentBox">
                        <CommentList data={this.state.data}/>
                  </div>

              );
          }
      });

      var CommentList = React.createClass({
                                          render:function(){
                                                var commentNodes = this.props.data.map(function(comment) {
                                                                                       return(
                                                                                              <Comment >
                                                                                                {comment}
                                                                                              </Comment>

                                                                                              );
                                                });
                                                return(
                                                    <div className="commentList">
                                                       {commentNodes}
                                                    </div>
                                                );
                                          }
      });

      var Comment = React.createClass({
                                     rawMarkup: function() {
                                        var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
                                        return { __html: rawMarkup };
                                      },
                                      render: function(){
                                            return (
                                                <div className="comment">
                                                    <span dangerouslySetInnerHTML={this.rawMarkup()} />
                                                </div>
                                            )
                                      }
      });


      ReactDOM.render(
                      <CommentBox url="/url/abc" pollInterval={10000}/>,
            document.getElementById('content')
      );

    </script>

---

3） 现在我还在Hibernate中使用

.setFetchSize（10）

。不确定它是否会添加next 10，然后添加next 10，因为我无法测试场景，因为我的UI还没有准备好。我感到震惊和无助。请帮帮我。谢谢。

分页不需要使用

setFetchSize（10）

。这是为了优化的目的。对于Hibernate分页，您可以使用这个简单的类（

pageSize=10

，例如）

---

与

条件一起使用的一种方法

分页时不需要使用

setFetchSize（10）

。这是为了优化的目的。对于Hibernate分页，您可以使用这个简单的类（

pageSize=10

，例如）

与

标准一起使用的示例

 $(document).ready(function(){
                $contentLoadTriggered = false;
                $("#content-box").scroll(function(){
                    if($("#content-box").scrollTop() >= ($("#content-wrapper").height() - $("#content-box").height()) && $contentLoadTriggered == false)
                    {
                        $contentLoadTriggered = true;
                        $.get("infinitContentServlet", function(data){
                            $("#content-wrapper").append(data);
                            $contentLoadTriggered = false;
                        });
                    }

                });
            });

public class Pagination {

    public static final Pagination EMPTY = new Pagination(0, 0);

    /** Page index, begins from 0. */
    private final int pageIndex;

    /** Objects on page count. */
    private final int pageSize;

    public Pagination(int pageIndex, int pageSize) {
        this.pageIndex = pageIndex;
        this.pageSize = pageSize;
    }

    public void addToCriteria(final Criteria criteria) {
        if (this == EMPTY) {
            return;
        }
        criteria.setMaxResults(pageSize);
        criteria.setFirstResult(pageIndex * pageSize);
    }

}