javascript - ReactJs:加载更多分页类型(附加)

Question

我是 ReactJS 的新手，我正在做的一件事是分页。 ReactJS 是制作复杂 UI View 的好工具，但有时最简单的事情也是最难的。我可以在 jQuery 中完成，但我想使用 React 来完成。

基本上，我想要一种“加载更多”样式的分页，其中项目附加到正文(如新闻提要)。在我的代码中，我执行一个 ajax 请求来获取数据，将其放入状态变量中，然后呈现 DOM。我只用一页数据就成功地完成了这项工作，因为我为项目创建了一个新变量。

onCallSuccessGetListings: function(data) {
    this.setState({ hasSuccess: data.success });

    if(data.success !== false) {
        this.setState({ 
            hasSuccess: JSON.parse(data).success,
            newListings: false
        });

        if(this.props.hasClickedPagination) {
            this.setState({
                newListings: JSON.parse(data).result
            });
        } else {
            this.setState({
                listings: JSON.parse(data).result
            });
        }
    }
},

基本上，我知道这个人何时点击了“加载更多”，然后我使用一个新变量来存储数据。这是渲染函数:

render: function() {
    var markup = [],
        nextMarkup = [];

    if(this.state.hasSuccess) {
        markup = Object.keys(this.state.listings).map(function(value){
            return (
                <div className="property__item" key={value}>
                    blablabla
                </div>
            )
        }, this)

        if(this.state.newListings !== false) {
            nextMarkup = Object.keys(this.state.newListings).map(function(value){
                return (
                    <div className="property__item" key={value}>
                        blablabla
                    </div>
                )
            }, this)
        }
    } else {
        markup.push(<p key="1">No results</p>)
    }

    return (
        <div className="property__list--grid">
            { markup }
            { nextMarkup }
        </div>
    );
}

如您所见，我正在复制代码，但我找不到一种方法来实现“React”风格。当用户再点击“加载更多”10 次时，我不想创建 10 个变量。

如果有人能提供帮助，那就太好了。我想不出解决方案，这几天一直困扰着我。

非常感谢。

Answer 1

This tutorial可能会帮助大家在 React 中实现分页列表。它有列表本身和一个更多按钮，用于从后端获取分页列表的下一个子集。教程中的后端已经提供。我希望它能帮助任何想要实现此类功能的人。