ReactJs如何显示带有更多加载选项的列表

ReactJs如何显示带有更多加载选项的列表

变化：

1.
首先定义

limit

的

state

变量使用

getInitialState

方法，你没有定义的限制，这就是为什么

this.state.limit

是

null

。

2. 定义方法的所有

functions

外部

render

。

3.

Arrow function

与

renderTodos

不是必需的。

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>        )    }});