没有后端的反应分页

Question

我有以下包含多个子组件的父组件：

class Parent extends React.Component {
  render() {
    <div>
      <Child id='1'/>
      <Child id='2'/>
      <Child id='3'/>
      <Child id='4'/>
      <Child id='5'/>
      <Child id='6'/>
      <Child id='7'/>
      <Child id='8'/>
    </div>
    }
}

我想在父 class 中进行分页，每个 'page' 最多显示 3 个子组件。有没有办法在没有复杂的后端集成的情况下做到这一点？

Answer 1

使用像 current_page_no 这样的状态变量，您可以从上一个、下一个等按钮更新它。然后只显示 3 children 从 current_page_no*3.

开始

Answer 2

Here's a small demo which shows how you can accomplish something like that. 它的工作原理是为正在查看的当前页面保持单个变量的状态，并根据当前页面有条件地呈现元素。您可以使用直接设置页面的单独链接或您喜欢的任何内容添加到此。

对于任何更复杂的事情，请查看路由，这是将您的应用程序状态同步到 URL 栏的概念，以使用户能够使用浏览器中的 back/forward 按钮进行导航。 React Router 是可用于实现此目的的众多库之一。

没有后端的反应分页

React pagination without backend

reactjs