我希望能够显示最多 5 个帖子，然后必须切换

Question

我目前正在使用反应。我想做的是显示如下所示的虚拟 JSON 数据

{
  "Posts": [
    {
      "title": "Title1",
      "author": "Author1",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    },
    {
      "title": "Title2",
      "author": "Author2",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    },
    {
      "title": "Title3",
      "author": "Author3",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    },
    {
      "title": "Title4",
      "author": "Author4",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    },
    {
      "title": "Title5",
      "author": "Author5",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    }
  ]
}

在一个名为 posts.jsx 的组件内部。

import React, { Component } from 'react';
import Data from './dataa';
import '../css/posts.scss';

const DataPost = Data.Posts;

class posts extends Component {
  state = {};
  render() {
    return DataPost.map(d => (
      <div class="postContainer container">
        <div className="displayPost">
          <h1 className="postTitle">{d.title}</h1>
          <h3 className="postAuthor">{d.author}</h3>
        </div>
      </div>
    ));
  }
}

export default posts;

我想将显示的帖子数量限制为 5，然后用户必须切换页面。就像谷歌搜索一样。我不确定如何编写逻辑代码，所以只显示了 5 个帖子。

Answer 1

如果您正在寻找类似分页的功能，您可以通过添加filter 函数来更新您的map 函数以限制数组从开始到结束的索引。

DataPost.filter((val, index) => {
  return index >= 2 && index <= 6;
}).map(item => (
  <div key={item.id}>
    <label>
      {item.title}
    </label>
  </div>
))}

在这里找到一个工作小提琴：https://jsfiddle.net/2bpt9mhn/

希望这是您正在寻找的。​​p>