使用react-js-pagination进行分页，但未应用引导程序样式

Question

我正在使用 react-js-pagination 在应用程序中显示页码。 Bootstrap已添加到 public / index.html 文件中，并且可以使用其他组件中的className进行访问。

对于分页组件，我是否需要显式添加引导程序样式？我看到的所有示例都自动应用了样式。

代码-

0123

Answer 1

好像react-js-pagination正在使用bootstrap v3，您可以执行以下操作

1. 使用npm安装引导程序v3（npm install bootstrap @ 3 --save）或
2. 在公共/index.html文件中包含CDN链接

Bootstrap v3 CDN

Answer 2

来自react-js-pagination文档：

  

如果您希望它适用于Bootstrap 4，则需要添加2   使用此组件时的其他道具：
  linkClass =“ page-link”   itemClass =“ page-item”

所以您只需要这样做：

<Pagination
    itemClass="page-item"
    linkClass="page-link"
    activePage={this.state.activePage}
    itemsCountPerPage={3}
    totalItemsCount={450}
    pageRangeDisplayed={3}
    onChange={this.handlePageChange}
/>