如何自定义Ant Design分页组件的「上一页」和「下一页」标签？

1. 补充翻译资源 #

在你的react-i18next翻译文件中添加分页相关的键值对：

• 英文配置（示例路径：src/locales/en.json）：

{
  "pagination": {
    "prev": "Previous page",
    "next": "Next page"
  }
}

• 法文配置（示例路径：src/locales/fr.json）：

{
  "pagination": {
    "prev": "Page précédente",
    "next": "Page suivante"
  }
}

2. 在组件中注入翻译文本 #

在使用Pagination的组件里，通过useTranslation钩子获取翻译函数，将对应文本传入组件的prevText和nextText属性：

import { Pagination } from 'antd';
import { useTranslation } from 'react-i18next';

function CustomPagination() {
  const { t } = useTranslation();

  return (
    <Pagination
      defaultCurrent={1}
      total={50}
      prevText={t('pagination.prev')}
      nextText={t('pagination.next')}
    />
  );
}

export default CustomPagination;

可选：全局同步Ant Design组件语言 #

如果需要统一所有Ant Design组件的语言风格，可在项目入口处结合Ant Design的ConfigProvider，同步react-i18next的语言切换：

import { ConfigProvider } from 'antd';
import frFR from 'antd/locale/fr_FR';
import enUS from 'antd/locale/en_US';
import { useTranslation } from 'react-i18next';

function App() {
  const { i18n } = useTranslation();
  const antdLocale = i18n.language === 'fr' ? frFR : enUS;

  return (
    <ConfigProvider locale={antdLocale}>
      {/* 应用主体内容 */}
    </ConfigProvider>
  );
}

这种方式下，分页组件的前后文本会自动匹配Ant Design的语言包，若需自定义文本，优先使用第二种方法。

内容的提问来源于stack exchange，提问作者RAZAFINARIVO Hanania