如何與React JS一起在UI中進行無限滾動？

Question

現在，我正在顯示從Mysql DB到前端的所有行，並且我將React JS用作項目的一部分。 我被感動了

1）如何使用休眠從Mysql DB中獲取前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>

我遇到了下面的wrt Infinite滾動代碼，但不確定如何將其與React 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);
    }

}

與Criteria使用的示例 。