React JhiPagination 组件中活动页面的样式答案

【问题标题】：Styles for active page in React JhiPagination componentReact JhiPagination 组件中活动页面的样式
【发布时间】：2019-10-25 19:56:27
【问题描述】：

JhiPagination 是用 jhipster 生成的抽象组件。它确实有一个我定义的 activePage 道具，就像默认生成的实体页面一样，但是生成的分页没有如图所示的当前活动页面类。

以前有没有人遇到过这样的限制？

<JhiPagination
    items={getPaginationItemsNumber(totalStreamsGateways, size)}
    activePage={ activePage + 1 }
    onSelect={this.handlePagination}
    maxButtons={5}
/>

【问题讨论】：

标签： reactjs pagination jhipster

【解决方案1】：

从 0.9 版开始，该组件不包含任何代码来突出显示活动页面。

组件来自react-jhipster。在source code中可以看到activePage这个props只用于：

计算应显示哪些页码；
启用或禁用首页、上一页、下一页和最后一页链接。

【讨论】：

所以无法通过jhipster分页将此功能添加到我当前的项目中？
不行，你得自己开发组件（可以从JhiPagination的源码开始）。
感谢您的回答和时间先生。

【解决方案2】：

我所做的是覆盖原始组件并创建自己的分页类，如下所示。

自定义分页.tsx

import {JhiItemCount, JhiPagination} from "react-jhipster";
import {PaginationItem, PaginationLink} from 'reactstrap';

class CustomPagination extends JhiPagination {
  displayPaginationItem = i => {
    const {activePage} = this.props;
    return (
      <PaginationItem className={activePage === i + 1 ? " current" : ''} key={i}>
        <PaginationLink onClick={this.updateActivePage(i + 1)}>
          {i + 1}
        </PaginationLink>
      </PaginationItem>
    )
  };
}

自定义分页.css

.current .page-link {
    /* your style on active element */
}

最后，我用<CustomPagination />组件代替<JhiPagnination />

【讨论】：