如何與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使用。