javascript - React + Meteor 中的无限滚动

Question

我正在使用 Meteor 和 React。我无法实现无限滚动。我尝试了不同的 npm 和 Meteor 包，但仍然无法正常工作。 “createContainer”订阅“links”的整个数据集，然后在应用程序中呈现。如何仅订阅 9 个条目并在用户到达页面末尾时加载更多条目？ 我花了一整天的时间，请帮助我!

class DealsList extends Component {


    renderList() {
        return this.props.links.map(link => {
        const url = `/travels/${link._id}`;

        return (
            <div className="col-md-4" key={link._id}>
            <Link  to={url} id={link._id}>
                <div className="thumbnail">

                <div className="imageProp">
                    <div className="caption readMore">SHOW DEAL <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
                    <img src={link.image} alt="Just another travel deal" />
                </div>

                <div className="caption">
                    <h4>{link.title}</h4>
                    {/*<p className="card-description"><strong>Bootstrap Thumbnail</strong> Customization Example. Here are customized <strong>bootstrap cards</strong>. We just apply some box shadow and remove border radius.</p>
                    <p><a href="#" className="btn btn-primary" role="button">Button</a></p>*/}
                </div>

                </div>
            </Link>
            </div>

        );
        });
    }


    render() {

        return (
          <div> 
          <FirstCarousel />
          <div className="container-fluid containerPadding cards-row">
              <div className="row">

              <div className="col-lg-12">
                  <div className="row grid">
                      {this.renderList()}
                  </div>
              </div>

              </div>

          </div>
          </div>
        );
    }
}



export default createContainer(() => {

Meteor.subscribe('links');

return { links: Links.find({}).fetch() };
}, DealsList);

Answer 1

有一个很好的chapter about pagination and infinite scroll in the Meteor Guide ， 你应该检查一下。本质上，您需要做的是为您的 lists 发布提供一个参数来指定将获取的项目数量，如下所示:

Meteor.publish('links', (limit) => {
  const options = {
    sort: {time: -1}, // Or some other relevant sorting
    limit
  };
  return Links.find({}, options);
};

现在您的父组件包含您的DealsList，您需要做两件事:1. 保存限制的状态变量，具有一些适当的初始值，该值将传递到您的 DealsList。 2. 当用户到达页面底部时，将此限制增加一定量。如果您进行搜索，您可以找到多个有关如何执行此操作的指南，例如您可以查看 this .

完成这些后，您可以简单地在订阅中使用 limit 参数，如下所示:

export default createContainer((props) => {
  Meteor.subscribe('links', props.limit);
  return { links: Links.find({}).fetch() };
}, DealsList);