Reactjs 反应表：自定义分页设计

我在我的react表中创建了自定义分页，我添加了页码，您可以在下面的描述中看到，现在我想在每个页码后添加正斜杠我尝试了一些东西，但它看起来与我的需要非常不同。因此，请给出相应的方法 谢谢你提前帮忙

我尝试的代码如下所示

[![import React from "react";
import './Pagination.css'

type IProps = {
    pages: number,
    page: number,
    PageButtonComponent: any,
    onPageChange: any,
    previousText: string,
    nextText: string,
    onPageSizeChange: any;
    pageSizeOptions: any;
    data: any;
    showPageSizeOptions:any;
    rowsText:string;
    pageSize:number
}

type IState = {
    visiblePages: any
}

const defaultButton = (props: any) => <button {...props}>{props.children}</button>;

export default class Pagination extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);

        this.changePage = this.changePage.bind(this);

        this.state = {
            visiblePages: this.getVisiblePages(0, props.pages)
        };
    }

    componentWillReceiveProps(nextProps: Readonly<IProps>): void {

        if (this.props.pages !== nextProps.pages) {
            this.setState({
                visiblePages: this.getVisiblePages(0, nextProps.pages)
            });
        }

        this.changePage(nextProps.page + 1);
    }

    filterPages = (visiblePages: any, totalPages: number) => {

        return visiblePages.filter((page: number) => page <= totalPages);
    };

    getVisiblePages = (page: number, total: number) => {

        if (total < 7) {
            return this.filterPages(\[1, 2, 3, 4, 5, 6\], total);
        } else {
            if (page % 5 >= 0 && page > 4 && page + 2 < total) {
                return \[1, page - 1, page, page + 1, total\];
            } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
                return \[1, total - 3, total - 2, total - 1, total\];
            } else {
                return \[1, 2, 3, 4, 5, total\];
            }
        }
    };

    changePage(page: any) {

        const activePage = this.props.page + 1;

        if (page === activePage) {
            return;
        }

        const visiblePages = this.getVisiblePages(page, this.props.pages);

        this.setState({
            visiblePages: this.filterPages(visiblePages, this.props.pages)
        });
        this.props.onPageChange(page - 1);

    }

    render() {

        const { PageButtonComponent = defaultButton } = this.props;
        const { visiblePages } = this.state;
        const activePage = this.props.page + 1;

        return (
            <div className="row">
                <div className='col-md-4 leftpagination'>
                    <span className={"totalText"}>{"Total  " + this.props.data.length}</span> &nbsp; &nbsp;
                    {this.props.showPageSizeOptions &&
                        <span className="select-wrap -pageSizeOptions">
                            <select
                                onChange={e => this.props.onPageSizeChange(Number(e.target.value))}
                                value={this.props.pageSize}
                            >
                                {this.props.pageSizeOptions.map((option:number, i:number) => (
                                    <option key={i} value={option}>
                                        {option} {this.props.rowsText}
                                    </option>
                                ))}
                            </select>
                        </span>}
                </div>
                <div className='col-md-8'>
                    <div className="Table__pagination">
                        <div className="Table__prevPageWrapper">
                            <PageButtonComponent
                                className="Table__pageButton"
                                onClick={() => {
                                    if (activePage === 1) return;
                                    this.changePage(activePage - 1);
                                }}
                                disabled={activePage === 1}
                            >
                                {this.props.previousText}
                            </PageButtonComponent>
                        </div>
                        <div className="Table__visiblePagesWrapper">
                            {visiblePages.map((page: number, index: number, array: \[\]) => {
                                return (
                                    <PageButtonComponent
                                        key={page}
                                        className={
                                            activePage === page
                                                ? "Table__pageButton Table__pageButton--active"
                                                : "Table__pageButton"
                                        }
                                        onClick={this.changePage.bind(null, page)}
                                    >
                                        {array\[index - 1\] + 2 < page ? `...${page}` : + page}
                                    </PageButtonComponent>
                                );
                            })}
                        </div>
                        <div className="Table__nextPageWrapper">
                            <PageButtonComponent
                                className="Table__pageButton"
                                onClick={() => {
                                    if (activePage === this.props.pages) return;
                                    this.changePage(activePage + 1);
                                }}
                                disabled={activePage === this.props.pages}
                            >
                                {this.props.nextText}
                            </PageButtonComponent>
                        </div>
                    </div>
                </div>

            </div>

        );
    }
}][1]][1]

[！[从“React”导入React；
导入“./Pagination.css”
IProps类型={
页数：，
页码：编号：，
PageButton组件：任何，
onPageChange：任何，
上一个文本：字符串，
下一个文本：字符串，
onPageSizeChange：任何；
页面大小选项：任何；
资料：有；
showPageSizeOptions：任何；
rowsText：字符串；
页面大小：数字
}
类型IState={
可访问页面：任何
}
constDefaultButton=（props:any）=>{props.children}；
导出默认类分页扩展React.Component{
建造师（道具：IProps）{
超级（道具）；
this.changePage=this.changePage.bind（this）；
此.state={
visiblePages:this.getVisiblePages（0，props.pages）
};
}
组件将接收道具（下一步：只读）：无效{
if（this.props.pages！==nextrops.pages）{
这是我的国家({
visiblePages:this.getVisiblePages（0，nextProps.pages）
});
}
此.changePage（nextrops.page+1）；
}
filterPages=（visiblePages:any，totalPages:number）=>{
返回visiblePages.filter（（页码）=>第页{
如果（总数<7）{
返回此.filterPages（\[1,2,3,4,5,6\]，总计）；
}否则{
如果（第%5页>=0&&page>4&&page+2<总计）{
返回\[1，第1页，第1页，第+1页，总计\]；
}否则（第%5页>=0&&page>4&&page+2>=总计）{
返回\[1，总计-3，总计-2，总计-1，总计\]；
}否则{
返回\[1,2,3,4,5，总计\]；
}
}
};
更改页面（页面：任意）{
const activePage=this.props.page+1；
如果（页面===activePage）{
返回；
}
const visiblePages=this.getVisiblePages（page，this.props.pages）；
这是我的国家({
visiblePages:this.filterPages（visiblePages，this.props.pages）
});
此.props.onPageChange（第1页）；
}
render（）{
常量{PageButtonComponent=defaultButton}=this.props；
const{visiblePages}=this.state；
const activePage=this.props.page+1；
返回(
{“Total”+this.props.data.length}
{this.props.showPageSizeOptions&&
this.props.onPageSizeChange（Number（e.target.value））}
值={this.props.pageSize}
>
{this.props.pageSizeOptions.map（（选项：number，i:number）=>(
{option}{this.props.rowsText}
))}
}
{
如果（activePage==1）返回；
这个.changePage（activePage-1）；
}}
已禁用={activePage===1}
>
{this.props.previousText}
{visiblePages.map（（页面：编号，索引：编号，数组：\[\]）=>{
返回(
{array\[index-1\]+2
{this.props.nextText}
);
}
}][1]][1]

我希望页面的结果看起来像<1/2/3…/11> 但当我尝试它时，它看起来像

---

这里我已经为分页设计编写了简单的代码。您可以使用它。

用于分页的HTML

<a>1</a>
<a>2</a>
<a>3</a>

您可以根据自己的网站修改设计。


希望这对您有用！
在这里，我为分页设计编写了简单的代码。您可以使用它。


用于分页的HTML

<a>1</a>
<a>2</a>
<a>3</a>


您可以根据自己的网站修改设计。


希望这对您有用！
您的解决方案很受欢迎，但查看我的代码不可能像您在回答中提到的那样放置类似的标记，这一个我也知道，但我想在我的代码中适合此解决方案这是主要问题您的解决方案很受欢迎，但查看我的代码不可能像您在ans中提到的那样放置类似的标记嗯，这个我也知道，但是我想在我的代码中加入这个解决方案，这是主要的问题