NextUI Pagination组件renderItem覆盖DOTS默认功能求助

问题核心：自定义renderItem时未区分Dots类型，导致其默认的悬停图标、跳转功能被覆盖，甚至显示异常。

解决方法很简单：在renderItem中判断当前项是否为Dots类型，若是则直接返回默认渲染，不使用自定义逻辑，仅对普通页码项应用自定义样式。

修改后的代码：

import { PaginationItemType } from "@nextui-org/pagination";

const renderItem = ({
    ref,
    key,
    value,
    isActive,
    setPage,
    className,
    type,
}: PaginationItemRenderProps) => {
    // 针对Dots类型，直接返回默认渲染以保留原有功能
    if (type === PaginationItemType.DOTS) {
        return (
            <span ref={ref} key={key} className={className}>
                {value}
            </span>
        );
    }

    // 普通页码项的自定义逻辑
    const pageNumber = typeof value === "number" ? value : parseInt(value, 10);

    return (
        <button
            ref={ref}
            key={key}
            className={cn(
                className,
                isActive &&
                    "bg-gradient-to-br from-indigo-500 to-pink-500 font-bold text-white",
            )}
            onClick={() => setPage(pageNumber)}
        >
            {value}
        </button>
    );
};

说明：

• 新增type参数，通过PaginationItemType.DOTS判断是否为省略号项
• Dots项直接用默认的<span>渲染，保留其原生的悬停图标、点击跳转逻辑
• 仅对普通页码应用自定义的按钮样式和点击事件，不干扰Dots的默认行为

内容的提问来源于stack exchange，提问作者Jordan Mitchell