Question

所以我正在研究ReactJS中的分页依赖。我的代码工作正常，但是分页的格式非常混乱。如何改善分页效果。当前显示为项目符号

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

它在浏览器中显示为附件图像

Answer 1

摘自react-js-pagination的文档：

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

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

如果没有，该软件包会提供一些道具来将类设置为不同的元素，然后应设置其样式：

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

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

因此，在这种情况下，我发现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>} />

reactjs中的分页格式

3 个答案: