Question

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

“Youtube”中的“显示更多”字样。

我可以渲染所有这些评论！但我不需要那个。我需要在每次点击按钮时显示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>
});

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

limitTo = 10;

每次“加载更多”操作时，我们会将此限制增加 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）采用包含15个元素的数组;

ii）使用count和defaultcount
初始化州
iii）然后我已映射data数组以显示showData函数
上的项目      如果return小于showData变量，我已index of array element count loadmore {i}}。

v）并且每次您点击handleCount按钮时，它都会调用count函数并将defaultCount值增加count。

vi）更新lodemore变量后，此示例中将显示更多5个数组元素

是的，我希望你能得到{{1}}

的基本概念

ReactJS显示项目列表

2 个答案: