Javascript 语义UI React：如何设置分页时的内容加载

我正在使用语义UI反应分页来加载服务器数据。我是ReactJS的初学者，有人能帮我弄清楚如何设置个人号码（1,2,3）的呼叫页面吗。例如，当用户单击

1

时，它检索

10

条目周围的有限数据，与用户单击

2

时相同，它加载更多条目

10-20

，并保持相同的方式。请帮帮我，因为我是新来的。谢谢

来自语义用户界面的分页代码

import React from 'react'
import { Pagination } from 'semantic-ui-react'

const PaginationExampleCompact = () => (
  <Pagination
    boundaryRange={0}
    defaultActivePage={1}
    ellipsisItem={null}
    firstItem={null}
    lastItem={null}
    siblingRange={1}
    totalPages={10}
  />
)

export default PaginationExampleCompact

从“React”导入React
从“语义ui反应”导入{Pagination}
常数paginationExampleComact=（）=>(
)
导出默认分页示例Compact

语义UI库通过其属性支持某些组件。 您可以自定义受支持的组件。 其中最重要的一点是分页组件仅用于UI接口。 通过设置属性值，可以自定义默认分页组件。 您必须使用特定的分页id向后端发送请求，后端将使用id匹配的结果进行响应。 总的来说，所有的功能都必须在后端实现。 在前端，您只能实现api请求和处理响应。

---

所以您应该主要关注后端api的实现。

您需要处理页码的状态以及显示的项目

工作演示：

导出类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
页码：2，
项目页码：10，
};
this.items=createItems（100）；
}
setPageNum=（事件，{activePage}）=>{
this.setState（{page:activePage}）；
};
render（）{
const itemsPerPage=10；
const{page}=this.state；
const totalPages=this.items.length/itemsPerPage；
const items=this.items.slice(
（第1页）*项目专页，
（第1页）*itemsPerPage+itemsPerPage
);
控制台日志（项目）；
返回(
{items.map（item=>(
{item}
))}
);
}
}

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 2,
      itemsPerPage: 10,
    };
    this.items = createItems(100);
  }

  setPageNum = (event, { activePage }) => {
    this.setState({ page: activePage });
  };

  render() {
    const itemsPerPage = 10;
    const { page } = this.state;
    const totalPages = this.items.length / itemsPerPage;
    const items = this.items.slice(
      (page - 1) * itemsPerPage,
      (page - 1) * itemsPerPage + itemsPerPage
    );
    console.log(items);
    return (
      <div className="App">
        <List divided>
          {items.map(item => (
            <List.Item key={item}>{item}</List.Item>
          ))}
        </List>
        <Pagination
          activePage={page}
          totalPages={totalPages}
          siblingRange={1}
          onPageChange={this.setPageNum}
        />
      </div>
    );
  }
}