要实现页码的高亮显示,可以通过在Pagination组件中添加一个active属性来标记当前页码。具体的做法如下:
首先,在Pagination组件中根据当前页码与pageIndex进行对比,判断是否添加active属性:
<Pagination
showTotal={total => `共 ${total} 条`}
showQuickJumper
defaultPageSize={20}
current={currentPage}
pageSize={pageSize}
pageSizeOptions={numArticles}
showSizeChanger
total={total}
onChange={tableOnChange}
>
{Array.from({ length: numPages }, (_, index) => (
<Pagination.Item key={index} active={index === currentPage}>
{index + 1}
</Pagination.Item>
))}
</Pagination>
这里使用了Array.from和map函数生成了一个长度为numPages的数组,并通过索引判断当前页码是否需要添加active属性。
然后,在tableOnChange方法中更新currentPage的值:
const tableOnChange = (pageIndex, pageSize) => {
console.log(pageIndex, pageSize, 'duha')
setCurrentPage(pageIndex)
setPageSize(pageSize)
getFeatureProduct(pageIndex, pageSize, props.displayPlatform);
};
这样就能根据currentPage与索引进行对比,动态设置相应页码的高亮显示。
请注意,在上述代码片段中,你需要将Pagination.Item替换为适合你项目的实际组件或HTML元素。
内容由零声教学AI助手提供,问题来源于学员提问