Reactjs如何在页面渲染完之后,动态添加子组件,就像jquery的append一样,以实现无限下拉加载数据的功能
给一个数组来计算翻页的页码,1页长度为1 ,2 为长度2 ,然后map 这个数组,下拉的时候,更新属性长度,更新 state,触发render,就能做到动态渲染
假设我们有一个新闻列表的组件叫做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> ); } });