reactjs - 如何在 react-pagination 包中添加带有下一个和上一个按钮的 html i 标签

Question

这是我的代码:

                         <ReactPaginate
                            previousLabel={'Previous'}
                            nextLabel={'Next'}
                            breakLabel={"..."}
                            breakClassName={"break-me"}
                            pageCount={this.state.pageCount}
                            marginPagesDisplayed={2}
                            pageRangeDisplayed={5}
                            onPageChange={this.handlePageClick}
                            containerClassName={"pagination"}
                            pageClassName={'page-item'}
                            subContainerClassName={"page-item"}
                            activeClassName={"active"}
                            pageLinkClassName={'page-link'}
                        />

我想用 previousLabel 和 nextlabel 添加 html i 标签

Answer 1

nextLabel 接受一个节点。

所以你可以在大括号内使用 jsx。

nextLabel={<i your icon node here />} 

或使用图像(示例)

nextLabel={<img src={image url} />}

或带文字的图标

previousLabel={<div><i class="fa fa-arrow-left" aria-hidden="true" />Previous</div>}