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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

自定义-pagination.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>
    )
  };
}

自定义-pagination.css

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

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

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

Styles for active page in React JhiPagination component

pagination

reactjs

jhipster