reactjs中的分页格式

Question

所以我正在研究 ReactJS 中的分页依赖性。我的代码工作正常，但分页的格式很乱。我怎样才能改善我的分页前景。它目前显示为项目符号

<Pagination
  activePage={this.state.activePage}
  itemsCountPerPage={18}
  totalItemsCount={this.state.totalBooks}
  pageRangeDisplayed={3}
  onChange={this.handlePageChange} />

在浏览器中显示为附件图片

Answer 1

所以我发现 material-ui 的 Mobile Stepper 在这种情况下很有帮助。我导入了
import MobileStepper from '@material-ui/core/MobileStepper';
我只需要制作一个简单的updatePage(i) 函数，该函数根据下一页或上一页取 +1 或 -1，并且可以在更新页面函数中完成相应的任何其他函数调用。因此，可以轻松地进行分页，并相应地呈现新信息。虽然这不是完全正确的方法，但它对我的功能有所帮助。

<MobileStepper steps='5' position='static' activeStep='1' nextButton={<Button size='small' onClick={this.updatePage.bind(this,1)}/>Next</Button>} backButton={ <Button size='small' onClick={this.updatePage.bind(this,-1)} disabled={this.props.match.params.pageNo <= 1}>Prev</Button>} />

Answer 2

你必须掌握一些关于 DOM 脚手架和 CSS 的概念：

ul {
  list-style: none;
  padding: 0;
}

ul li {
 display: inline-block;
}

ul li a {
 text-decoration:none;
 color: #999;
}

ul li a:hover, ul li a.active {
 color: #333;
}

<ul>
  <li><a href="#" /><</a></li>
  <li><a href="#" class="active"/>1</a></li>
  <li><a href="#" />2</a></li>
  <li><a href="#" />></a></li>
</ul>

Answer 3

来自react-js-pagination的文档：

该组件没有内置样式。 HTML 布局与 Bootstrap 分页样式表兼容。

因此，如果您使用的是 Bootstrap，它应该可以正常工作。

如果不是这个包提供了一些属性来设置不同元素的类，那么你应该给它们设置样式：

innerClass, activeClass, activeLinkClass, itemClass, itemClassFirst, itemClassPrev, itemClassNext, itemClassLast ...