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

我希望在Parent类中显示分页，每个'page'显示最多3个Child组件。没有复杂的后端集成，有没有办法做到这一点？

Answer 1

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

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

Answer 2

使用像current_page_no这样的状态变量，您可以从prev，next等按钮更新。然后只显示从current_page_no * 3开始的3个孩子。

没有后端的反应分页

2 个答案: