Question

我正在使用语义UI React分页加载服务器数据。我是ReactJS的初学者，请有人帮我弄清楚如何设置单个数字（1,2,3）上的页面调用。例如，当用户单击1时，它会检索10个条目附近的有限数据，就像用户单击2时一样，它会加载其他条目10-20并保持相同的方式。请帮助我，因为我是新来的。谢谢

语义UI React中的分页代码

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

Answer 1

语义UI库通过其属性支持某些组件。您可以自定义受支持的组件。最重要的事情之一是分页组件仅用于UI界面。您可以通过设置属性值来自定义默认的分页组件。您必须将请求发送到具有特定分页ID的后端，后端将以ID匹配的结果进行响应。总体而言，所有功能都必须在后端实现。在前端，您只能实现api请求和处理响应。因此，您应该主要关注后端api的实现。

Answer 2

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

正在运行的演示：https://codesandbox.io/s/admiring-voice-l1dc5

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

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

2 个答案: