React + Meteor 中的无限滚动答案

【问题标题】：infinite scroll in React + MeteorReact + Meteor 中的无限滚动
【发布时间】：2017-11-04 01:50:19
【问题描述】：

我正在使用 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);

【问题讨论】：

只是建议不要无限滚动，因为每个模板实例或组件都会订阅一些集合，随着每次滚动获取，订阅会不断增加，可能会导致网络堵塞。
那你能提供什么？
分页总是一个不错的选择

标签： javascript node.js reactjs meteor infinite-scroll

【解决方案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);
};

现在您的 parent 组件包含您的DealsList，您需要做两件事： 1. 为limit 保存一个状态变量，并带有一些适当的初始值，即通过到你的DealsList。 2. 当用户到达页面底部时，将这个限制增加一些。如果您搜索，您可以找到多个指南，例如您可以查看this。

完成后，您可以像这样在订阅中简单地使用限制参数：

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

【讨论】：