Javascript ReactJS显示项目列表

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

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

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

有人能帮我吗

---

谢谢

所以我们假设您在一个数组中有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>
});

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

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

---

那么让我们假设在一个数组中有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>
});

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

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

---

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

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>
  );
 }
}

import React，{Component}来自'React'；
类路由器扩展组件{
构造函数（）{
超级（）；
这个数据=[1,2,3,4,5,6,7,8,9,6,4,3,2,1,5]；
此.state={
计数：5，
默认计数：5，
};
}
handleCount（）{
让计数=this.state.defaultCount；
count=count+this.state.count；
this.setState（{count}）；
}
render（）{
const count=this.state.count；
const showData=（项目、索引）=>{
返回（（索引<计数）？
{item}
：“”）；
};
返回(
{this.data.map（showData）}
);
}
}

我在这里所做的：

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

ii）使用

count

和

defaultcount

iii）然后映射

数据

数组，在

showData

函数中显示项目

iV）在

showData

函数的

return

上，我检查了数组元素的

索引是否小于
计数
变量

v） 每次单击
loadmore
按钮时，它将调用
handleCount
函数，并将
count
值增加
defaultCount

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

就是这样，我希望您能了解
lodemore
的基本概念，从下面的代码中，您可以了解如何从头开始实现
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>
  );
 }
}

import React，{Component}来自'React'；
类路由器扩展组件{
构造函数（）{
超级（）；
这个数据=[1,2,3,4,5,6,7,8,9,6,4,3,2,1,5]；
此.state={
计数：5，
默认计数：5，
};
}
handleCount（）{
让计数=this.state.defaultCount；
count=count+this.state.count；
this.setState（{count}）；
}
render（）{
const count=this.state.count；
const showData=（项目、索引）=>{
返回（（索引<计数）？
{item}
：“”）；
};
返回(
{this.data.map（showData）}
);
}
}

我在这里所做的：

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

ii）使用
count
和
defaultcount

iii）然后映射
数据
数组，在
showData
函数中显示项目

iV）在
showData
函数的
return
上，我检查了数组元素的
索引是否小于
计数
变量

v） 每次单击
loadmore
按钮时，它将调用
handleCount
函数，并将
count
值增加
defaultCount

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

就是这样，我希望您了解
lodemore
的基本概念。请展示您迄今为止所做的尝试，或者发布一些代码来说明您遇到的困难。我（从标签）推测您从flux商店获得了评论。与其获取所有注释，然后在组件中进行过滤，不如只从服务器获取10条注释，并构建一个新的通量操作，如
LOAD\u MORE\u comments
，当用户单击按钮时将调用该操作，这将进行ajax调用以完成数据集。@Pandaiolo这是最好的选择。让服务器处理传递给客户端的评论数。请显示您迄今为止尝试过的内容，或发布一些代码以显示您遇到的问题。我（从标签）推测您是从flux store获得评论的。与其获取所有注释，然后在组件中进行过滤，不如只从服务器获取10条注释，并构建一个新的通量操作，如
LOAD\u MORE\u comments
，当用户单击按钮时将调用该操作，这将进行ajax调用以完成数据集。@Pandaiolo这是最好的选择。让服务器处理传递给客户端的评论数。如果你的应用程序必须扩展到许多（数千）条评论，则此实现将有问题-请参阅原始版本上的“我的评论”question@Pandaiolo你说得对，我刚刚为他目前的处境实施了一个解决方案。也许他不能更改API。
comments.slice（0，10）.map（…
应该是
comments.slice（0，this.state.limitTo）.map（…
所以现在，我将从“0”切到“10”，而不是从“0”切到“this.state.limito”，每次用户点击按钮，如果你的应用程序必须扩展到多个，那么这个实现就会有问题（数千）条评论-见我的comme