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

【问题标题】：Using react-js-pagination for pagination but bootstrap style not getting applied使用 react-js-pagination 进行分页，但引导样式未应用
【发布时间】：2019-11-05 14:50:10
【问题描述】：

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

对于分页组件，我需要显式添加引导样式吗？我见过的所有示例都自动应用了样式。

代码-

import Pagination from "react-js-pagination";
<Pagination
        activePage={this.state.activePage}
        itemsCountPerPage={3}
        totalItemsCount={450}
        pageRangeDisplayed={3}
        onChange={this.handlePageChange}
      />

【问题讨论】：

标签： javascript reactjs pagination bootstrap-4

【解决方案1】：

来自 react-js-pagination 文档：

如果您希望它适用于 Bootstrap 4，则需要添加 2 使用此组件时的附加道具：
linkClass="页面链接" itemClass="page-item"

所以你只需要这样做：

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

【讨论】：

【解决方案2】：

看起来 react-js-pagination 使用的是 bootstrap v3，你可以这样做

使用 npm (npm install bootstrap@3 --save) 安装 bootstrap v3 或
在 public/index.html 文件中包含 cdn 链接

Bootstrap v3 CDN

【讨论】：