ReactJS 显示项目列表

Question

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

类似于 'Youtube' 中的 'show more'。

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

谁能帮帮我谢谢

Answer 1

所以让我们假设您在数组中有 20 条评论

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

然后你可以使用slice获取前10条评论，然后将它们映射到实际HTML

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

要添加 "Load more" 功能，我们将具有 limitTo 状态

limitTo = 10;

并且对于每个 "Load more" 操作，我们会将此限制增加 10 例如。

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

Answer 2

从下面的代码中，您可以了解如何从头开始实现 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) take an array with 15 elements;

ii) initialize the state with count and defaultcount

iii) then i have map the data array to show the item on showData function

iV) on the return of showData function i have checed if the index of array element is less than the count variable.

v) and each time you click on loadmore button it will call the handleCount function and increate the count value by defaultCount.

vi) after the count variable updated than more 5 array element will be shown on this example

就是这样，我希望你能了解lodemore

的基本概念

ReactJS 显示项目列表

ReactJS showing list of items

javascript

flux

reactjs

redux