要封装一个加载更多的组件，功能都已经实现了。很多页面都需要这样的功能，又不想重复代码，求好的方案。
打开后发起一个请求，返回结果，如果点下面的加载更多，则发起新的请求，只是地址参数中page加1
export default class ListLoadingComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
data: [],
hasMore: false,
isLoadingMore: false,
page: 1,
}
}
componentDidMount() {
this.loadFirstPageData()
}
fetch(url) {
return fetch(url, {
credentials: 'include',
headers: {
'Accept': 'application/json, text/plain, */*'
}
}).then(res => res.json())
}
loadFirstPageData() {
const result = this.fetch(this.props.url)
this.resultHandle(result)
}
loadMoreData() {
this.setState({
isLoadingMore: true
})
const result = this.fetch(this.props.url)
setTimeout(() => {
this.resultHandle(result)
this.setState({
isLoadingMore: false
})
}, 1000)
}
resultHandle(result) {
result.then(res => {
this.setState({
page: ++this.state.page,
// TODO 返回结果里必须带有这个字段
hasMore: res.hasMore,
data: this.state.data.concat(res.data)
})
})
}
clickHandle() {
this.props.loadMoreFn();
}
render() {
return (
<div className="List-loading-container">
{this.props.children}
<LoadMoreComponent
isLoadingMore={this.state.isLoadingMore}
loadMoreFn={this.loadMoreData.bind(this)}>
</LoadMoreComponent>
</div>
)
}
}
更多按钮组件
import React from 'react'
import './style.styl'
export default class LoadMoreComponent extends React.Component {
constructor(props, context) {
super(props, context);
}
clickHandle() {
this.props.loadMoreFn();
}
render() {
return (
<div className="load-more">
{
this.props.isLoadingMore ?
<span>加载中...</span> :
<span onClick={this.clickHandle.bind(this)}>加载更多</span>
}
</div>
)
}
}