javascript - Reactjs如何在页面渲染完之后，动态添加子组件，就像jquery的append一样，以实现无限下拉加载数据的功能

Question

Reactjs如何在页面渲染完之后，动态添加子组件，就像jquery的append一样，以实现无限下拉加载数据的功能

Answer 1

假设我们有一个新闻列表的组件叫做NewsListComponent，还有它包含了单个新闻的组件，叫做NewsItemComponent，当滑动到底部的时候会请求API把新的新闻加载进来。那么我们可以在NewsListComponent加载完成以后，监听scroll事件，当滑动到底部就去请求API，并且改变state来把新的新闻条目append进来。下面是一个大概的示例，跑不起来，但是能表达出这个意思：

js'use strict';

var React = require('react');

var NewsItemComponent = React.createClass({
  render: function() {
    return (


<p>
        <h2>{this.props.title}</h2>
        <p>{this.props.content}</p>
      </p>


    );
  }
});

var NewsListComponent = React.createClass({
  getInitialState: function() {
    return {newsList: []}
  },

  componentDidMount: function() {
    document.addEventListener('scroll', this.handleScroll);
  },

  componentWillUnmount: function() {
    document.removeEventListener('scroll', this.handleScroll);
  },

  addNews: function(news) {
    this.setState({newsList: this.state.newsList.concat(news)});
  },

  handleScroll: function() {
    if (isBottom) {
      ajax.request('api').then(this.addNews);
    }
  },

  render: function() {
    var newsList = this.state.newsList.map(function(news) {
      return <NewsItemComponent news={news} key={news.id} />;
    });

    return (
      <p>
        {newsList}
      </p>
    );
  }
});

Answer 2

给一个数组来计算翻页的页码，1页长度为1 ，2 为长度2 ，然后map 这个数组，下拉的时候，更新属性长度，更新 state，触发render，就能做到动态渲染

Answer 3

当判断滚动条到某个位置或最底部的时候，需将当前page+1，然后若用的redux，则直接调用redux的action，在reducer中将新加载的数据添加到之前的列表数据中，redux会自动触发react的render操作。
若没用数据管理，也可直接在组件中调用下一页的API，然后通过setState往list后面添加数据，页面也会自动更新