ReactJS 显示项目列表

Question

我有一个对象数组（某个项目的 cmets 列表），我想在页面上显示它。但并非所有这些 cmets！例如前 10 个。在该列表下方，我想呈现一些按钮。如果用户想要查看接下来的 10 个 cmets，他需要单击该按钮。

类似“Youtube”中的“显示更多”。

我可以渲染所有这些 cmets！但我不需要那个。每次单击按钮时，我需要显示 10 个 cmets。

谁能帮帮我 谢谢

Answer 1

从下面的代码中，您可以了解如何从头开始实现loadmore 组件，

import React, { Component } from 'react';

class Router extends Component {
  constructor() {
    super();
    this.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 4, 3, 2, 1, 5];
    this.state = {
      count: 5,
      defaultCount: 5,
    };
  }
  handleCount() {
    let count = this.state.defaultCount;
    count = count + this.state.count;
    this.setState({ count });
  }
  render() {
    const count = this.state.count;
    const showData = (item, index) => {
     return ((index < count) ? <li>{item}</li> : '');
    };
 return (
   <div>
     {this.data.map(showData)}
     <a href="#" onClick={this.handleCount.bind(this)}>Load</a>
   </div>
  );
 }
}

我在这里做了什么：

i) 取一个包含 15 个元素的数组；

ii) 使用count 和defaultcount 初始化状态

iii) 然后我映射data 数组以在showData 函数上显示项目

iV) 在showData 函数的return 上，我检查了index of array element 是否小于count 变量。

v) 并且每次单击loadmore 按钮时，它都会调用handleCount 函数并通过defaultCount 创建count 值。

vi) count 变量更新后超过 5 个数组元素将显示在此示例中

就是这样，希望你了解lodemore的基本概念

Answer 2

所以让我们假设一个数组中有 20 个 cmets

var comments = getComments() // returns list of 20 comments

然后你可以使用slice获取前10个cmets，然后将它们映射到实际的HTML

var commentsAsHTML = comments.slice(0, this.state.limitTo).map(comment => {
   return <li key={comment.id}>{comment.text}</li>
});

要添加“加载更多”功能，我们将拥有limitTo 状态

limitTo = 10;

例如，对于每个“加载更多”操作，我们会将此限制增加 10。

onLoadMore () {
   this.setState({
      limitTo: this.state.limitTo + 10
   });
}