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

3 个回答

发布于
2015-06-23

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

js'use strict';

var React = require('react');

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


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


    );
  }
});

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 (
      <div>
        {newsList}
      </div>
    );
  }
});