反应 流星中的无限滚动

Question

我将流星与React一起使用。我无法实施无限的滚动。我尝试了不同的NPM和流星软件包，但它仍然无法正常工作。" createContainer"订阅了"链接"的整个数据集，然后在应用程序中渲染。每当用户在页面末尾，如何仅订阅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

在《流星指南》中有关于分页和无限滚动的好章节，您应该检查一下。本质上，您需要做的是给您的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.当用户到达页面底部时，将此限制增加了一定的数量。您可以在搜索中找到多个有关如何执行此操作的指南，例如，您可以查看此操作。

完成这些操作后，您可以在这样的订阅中使用限制参数：

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