javascript - ReactJS 显示项目列表

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