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

Question

现在我正在将所有行从Mysql数据库显示到前端，并将React JS用作我项目的一部分。我碰到

1）如何获得前10行，然后下10行，然后10行，直到从MySQL数据库使用休眠的最后一行？

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

的阵营我现在使用的

<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> 

我碰到了下面的一段代码WRT无限滚动来到JS代码，但不知道如何与一起使用这个阵营JS

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

       }); 
      }); 

3 ）现在我在Hibernate中使用.setFetchSize(10)。不确定是否会添加下一个10，然后是下一个10，因为我的UI尚未准备好，所以我无法测试该场景。我感到震惊和无助。请帮帮我。谢谢。

Answer 1

您无需使用setFetchSize(10)进行分页。这是为了优化目的。对于使用Hibernate分页你可以使用这个简单类（pageSize = 10您的例子）

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); 
    } 

} 

的example有Criteria使用。