变化：

1.先用using方法定义limitinstate变量getInitialState，你没有定义limit，所以this.state.limit是null。

2.定义方法的所有functions外部render。

3. Arrow function withrenderTodos不是必需的。

4.使用this关键字调用renderTodos方法如下：

{this.renderTodos()}

像这样写：

var TodoList=React.createClass({

    getInitialState: function(){
        return {
            limit: 5
        }
    },

    onLoadMore() {
        this.setState({
            limit: this.state.limit + 5
        });
    },

    renderTodos: function(){
        return todos.slice(0,this.state.limit).map((todo)=>{
            return(
                <Todo key={todo.todo_id}{...todo} onToggle={this.props.onToggle}/>
            );
        });
    };

    render:function(){
        var {todos} = this.props;
        return(
            <div>
                {this.renderTodos()}
                <a href="#" onClick={this.onLoadMore}>Load</a>
            </div>
        )
    }
});

这是没有按钮点击。

众所周知，react 组件有一个函数componentDidMount()，当该组件的模板被渲染到 DOM 中时，它会自动调用。我使用相同的函数将滚动的事件侦听器添加到我们的 div iScroll 中。scrollTop元素的属性会找到滚动位置并将其添加到clientHeight属性中。接下来，if 条件将检查这两个属性的添加是否大于或等于滚动条高度。如果条件为真，loadMoreItems函数将运行。

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 10,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >=this.refs.iScroll.scrollHeight){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key={i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 3000);
  }

  render() {
    return (
      <div ref="iScroll" style={{ height: "200px", overflow: "auto" }}>
        <ul>
          {this.displayItems()}
        </ul>

        {this.state.loadingState ? <p className="loading"> loading More Items..</p> : ""}

      </div>
    );
  }
}

这是例子